{{!
  Copyright (c) 2016, 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.
}}
<div class="col-lg-12  margin-top-double">
    <h1 class="grey ">Connected Cup</h1>
    <hr>
</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 padding-top">
    <img src="{{@unit.publicUri}}/images/coffeecup.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-9 col-lg-9 padding-top">
    <h3 class="uppercase">What it Does</h3>
    <hr>
    <p class="grey margin-top">Connected cup is a virtual simulation of a smart coffee cup from the IOT Hardware
                               manufacturer "Coffee King". Once an instance of the virtual Connected-Cup, Users can play
                               around with the temperature and Coffee level. And the information will be relayed back to
                               the IoTServer and summarized.
    </p>
    <p>The device supports communication via HTTPS only.</p>
    <br>
    <h3 class="uppercase">What You Need</h3>
    <hr>
    <ul class="list-unstyled">
        <li class="padding-top-double">
            <span class="badge">STEP 01</span>
               Go ahead and [Download] the Device.
        </li>
        <li>
            <span class="badge">STEP 02</span>
               Proceed to [Prepare] section.
        </li>
        <li>
            <span class="badge">STEP 03</span>
               Read [Try Out] section to further experiment with the device.
        </li>
    </ul>
    <br>
    <a href="/api-store/apis/info?name={{@uriParams.deviceType}}&version=1.0.0&provider=admin"
       class="btn-operations"
       target="_blank"><i class="fw fw-api"></i> View API</i>
    </a>
    <a href="#" class="download-link btn-operations">
        <i class="fw fw-download"></i>Create an instance</a>
    <div id="download-device-modal-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered">
                    <h3>Name your Connected cup instance.</h3>
                    <br/>
                    <form id="downloadForm">
                        <div class="control-group">
                            <div class="controls">
                                <input class="connectedCupName" style="color:#3f3f3f;padding:5px"
                                       type="text"
                                       placeholder="Ex. Office_CoffeeCup"
                                       name="name" size="60" required>
                                <br/>
                                <input type="hidden" class="owner" name="owner" value={{@user.username}} />
                            </div>
                        </div>
                        <br/>
                        <div class="buttons">
                            <a class="btn-operations" onclick="downloadAgent()">Create an Instance</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="device-created-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Connected cup device created. </h3>
                    <p> Select instance of the Connected Cup you created from the "Devices" section. </p>
                    <div class="buttons">
                        <a href="#" id="device-created-link" class="btn-operations">
                            &nbsp;&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;&nbsp;
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="device-400-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Exception at backend. Try Later.</h3>

                    <div class="buttons">
                        <a href="#" id="device-400-link" class="btn-operations">
                            &nbsp;&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;&nbsp;
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="device-401-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>You have to log in first.</h3><br/>

                    <div class="buttons">
                        <a href="#" id="device-401-link" class="blue-button">
                            &nbsp;&nbsp;&nbsp;&nbsp;Goto Login Page&nbsp;&nbsp;&nbsp;&nbsp;
                        </a>&nbsp;&nbsp;
                        <a href="#" onclick="hidePopup();" class="btn-operations">
                            &nbsp;&nbsp;&nbsp;&nbsp;Cancel&nbsp;&nbsp;&nbsp;&nbsp;
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="device-403-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Action not permitted.</h3><br/>

                    <div class="buttons">
                        <a href="#" id="device-403-link" class="btn-operations">
                            &nbsp;&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;&nbsp;
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="device-409-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Device Sketch does not exist.</h3><br/>

                    <div class="buttons">
                        <a href="#" id="device-409-link" class="btn-operations">
                            &nbsp;&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;&nbsp;
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="device-unexpected-error-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Unexpected error.</h3><br/>

                    <div class="buttons">
                        <a href="#" id="device-unexpected-error-link" class="btn-operations">
                            &nbsp;&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;&nbsp;
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <br/><br/>
</div>

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double grey-bg ">
    <h3 class="uppercase">Try Out</h3><hr>
    <p class="grey margin-top">Access your Device</p>
    <br/>
    <ul>
        <p class="padding-top-double"><span class="circle">01</span> Select instance of the Connected Cup you created from the "Devices" section.</p>
        <p class="padding-top-double"><span class="circle">02</span> Click the [Go to Device] button from the "Operations" section and you will be able to view and experiment with the device.</p>
    </ul>
    <br>
</div>

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding-double">
    <h3 class="uppercase">Connected Cup Agent</h3><hr>
    <p class="grey margin-top">Click on the image to zoom</p>
    <center>
        <a href="{{@unit.publicUri}}/images/coffee_stats.png" target="_blank">
            <img src="{{@unit.publicUri}}/images/coffee_stats.png" class="img-responsive">
        </a>
    </center>
    <br/>
</div>

{{#zone "topCss"}}
    {{css "css/styles.css"}}
{{/zone}}

{{#zone "bottomJs"}}
    {{js "/js/download.js"}}
    {{js "/js/jquery.validate.js"}}
{{/zone}}