/*
 * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import React, {Component} from 'react'
import ApiCreateEndpoint from './Endpoint/ApiCreateEndpoint'
import ApiCreateSwagger from './Swagger/ApiCreateSwagger'
import {Route, Switch, Link} from 'react-router-dom'
import './ApiCreate.css'


class ApiCreate extends Component {
    render() {
        return (
                <div>
                    <h1 className="page-header text-center">Let's get started...</h1>
                    <p className="text-center">It only takes few minutes to design, publish and manage APIs in WSO2 API
                        Manager</p>
                    <div className="ch-grid-container">
                        <ul className="ch-grid">
                            <li>
                                <Link to="/api/create/swagger">
                                <div className="test_button ch-item depth-1">
                                    <div className="ch-info-wrap">
                                        <div className="ch-info">
                                            <div className="ch-info-front ch-img-1">
                                                <i className="fw fw-document fw-4x"/>
                                                <span>I Have an Existing API</span>
                                            </div>
                                            <div className="ch-info-back">
                                                <p className="unselectable">Use an existing API's endpoint or the API
                                                    Swagger
                                                    definition to create an API</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </Link>
                            </li>
                            <li>
                                <Link to="/api/create/rest">
                                <div className="test_button ch-item depth-1 ripple-effect">
                                    <div className="ch-info-wrap">
                                        <div className="ch-info">
                                            <div className="ch-info-front ch-img-2">
                                                <i className="fw fw-endpoint fw-4x"/>
                                                <span>I Have a SOAP Endpoint</span>
                                            </div>
                                            <div className="ch-info-back">
                                                <p className="unselectable">Use an existing SOAP endpoint to create a
                                                    managed API.
                                                    Import the WSDL of the SOAP service</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </Link>
                            </li>
                            <li>
                                <Link to="/api/create/rest">
                                <div className="test_button ch-item depth-1 ripple-effect">
                                    <div className="ch-info-wrap">
                                        <div className="ch-info">
                                            <div className="ch-info-front ch-img-3">
                                                <i className="fw fw-rest-api fw-4x"/>
                                                <span>Design New REST API</span>
                                            </div>
                                            <div className="ch-info-back">
                                                <p className="unselectable">Design and prototype a new REST API</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </Link>
                            </li>
                            <li>
                                <Link to="/api/create/rest">
                                <div className="test_button ch-item depth-1 ripple-effect">
                                    <div className="ch-info-wrap">
                                        <div className="ch-info">
                                            <div className="ch-info-front ch-img-4">
                                                <i className="fw fw-web-clip fw-4x"/>
                                                <span>Design New Websocket API</span>
                                            </div>
                                            <div className="ch-info-back">
                                                <p className="unselectable">Design and prototype a new Websocket API</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </Link>
                            </li>
                        </ul>
                    </div>
                    <Switch>
                        <Route path={"/api/create/rest"} component={ApiCreateEndpoint}/>
                        <Route path={"/api/create/swagger"} component={ApiCreateSwagger}/>
                    </Switch>
                    {/*<ApiCreateEndpoint/>*/}

                </div>
        );
    }
}

export default ApiCreate
@@ -985,22 +985,14 @@
     
-    
 %3Cdiv%3E%0A
-    
     
@@ -1069,20 +1069,16 @@
 ..%3C/h1%3E%0A
-    
         
@@ -1181,28 +1181,24 @@
 in WSO2 API%0A
-    
             
@@ -1225,36 +1225,32 @@
                 
-    
 %3Cdiv className=%22
@@ -1265,28 +1265,24 @@
 container%22%3E%0A
-    
             
@@ -1334,37 +1334,29 @@
             
-    
 %3Cli%3E%0A
-    
             
@@ -2461,36 +2461,32 @@
             
-    
 %3C/Link%3E%0A
             
@@ -2465,36 +2465,32 @@
         %3C/Link%3E%0A
-    
                 
@@ -2523,37 +2523,29 @@
             
-    
 %3Cli%3E%0A
-    
             
@@ -3674,36 +3674,32 @@
             
-    
 %3C/Link%3E%0A
             
@@ -3678,36 +3678,32 @@
         %3C/Link%3E%0A
-    
                 
@@ -3736,37 +3736,29 @@
             
-    
 %3Cli%3E%0A
-    
             
@@ -4725,36 +4725,32 @@
             
-    
 %3C/Link%3E%0A
             
@@ -4729,36 +4729,32 @@
         %3C/Link%3E%0A
-    
                 
@@ -4787,37 +4787,29 @@
             
-    
 %3Cli%3E%0A
-    
             
@@ -5782,36 +5782,32 @@
                 
-    
 %3C/Link%3E%0A        
@@ -5814,36 +5814,32 @@
                 
-    
 %3C/li%3E%0A          
@@ -5852,22 +5852,14 @@
     
-  
-  
 %3C/ul%3E%0A
-    
     
@@ -5869,36 +5869,32 @@
          %3C/div%3E%0A
-    
                 
@@ -5914,36 +5914,32 @@
                 
-    
 %3CRoute path=%7B%22/a
@@ -5983,28 +5983,24 @@
 Endpoint%7D/%3E%0A
-    
             
@@ -6090,20 +6090,16 @@
         
-  
-  
 %3C/Switch
@@ -6092,36 +6092,32 @@
       %3C/Switch%3E%0A
-    
                 
@@ -6144,20 +6144,16 @@
 t/%3E*/%7D%0A%0A
-    
         

Refactor ApiCreate component styling