<!DOCTYPE html>
<html>
<head>

    <!--Import Isolated bootstrap styles-->
    <link rel="stylesheet" href="/css/libs/bootstrap-iso.css">

    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.css">

    <!--Import custom.css-->
    <link type="text/css" rel="stylesheet" href="/css/shared/authoring2.css" media="screen,projection"/>

    <!--Import jQuery UI CSS-->
    <link type="text/css" rel="stylesheet" href="/css/libs/jquery-ui.min.css" media="screen,projection"/>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <!--Font Awesome-->
    <link rel="stylesheet" href="/fonts/font-awesome-4.4.0/css/font-awesome.min.css">

</head>

<body>
<div class="header-bar">
    <div class="logo-container"></div>
    <div class="header-bar-navigation">
        <ul>
            <a href="/authoring/build">
                <li>build</li>
            </a>
            <a href="/authoring/publishing">
                <li>publish</li>
            </a>
            <a href="/authoring/fog">
                <li class="header-bar-navigation-selected">ioFog Nodes</li>
            </a>
            <a href="/authoring/account">
                <li>account</li>
            </a>
            <a href="https://gitter.im/iofog">
                <li>forum</li>
            </a>
            <a href="/logout">
                <li>logout</li>
            </a>
        </ul>
    </div>
</div>
<div class="fog-toolbox">
    <!--             <div class="row headroom20">
                    <div class="col s12">
                        <a href="#add-bluebox" class="modal-trigger waves-effect waves-light btn blue" id="bluebox-add-button">+ BlueBox</a>
                    </div>
                </div> -->
    <div class="row headroom20">
        <div id="fogTypeContainer" class="col s12">
        </div>
    </div>
</div>
<div class="fog-canvas">
    <div id="fog-canvas-layout-grid">
    </div>
</div>
<div class="fog-properties">
    <div style="display:none;" class="fog-properties-loading-overlay">
        <div class="fog-properties-loading-spinner">
            <div class="sk-child sk-bounce1"></div>
            <div class="sk-child sk-bounce2"></div>
            <div class="sk-child sk-bounce3"></div>
        </div>
    </div>
    <div class="row headroom20">
        <div class="col s10 offset-s1">
            Name <input type="text" id="fog-instance-properties-name" name="fog-instance-properties-name"
                        value="No ioFog Instance Selected">
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            Location <input type="text" id="fog-instance-properties-location"
                            name="fog-instance-properties-location" value="-">
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            GPS mode: <span id="fog-instance-properties-gpsmode">-</span>
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            Lat <input type="text" id="fog-instance-properties-lat"
                       name="fog-instance-properties-lat" value="-">
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            Lon <input type="text" id="fog-instance-properties-lon"
                       name="fog-instance-properties-lon" value="-">
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            Description <input type="text" id="fog-instance-properties-description"
                               name="fog-instance-properties-description" value="-">
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            <input type="checkbox" class="filled-in" id="fog-instance-properties-bluetooth"/>
            <label for="fog-instance-properties-bluetooth">Enable Bluetooth</label>
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            <input type="checkbox" class="filled-in" id="fog-instance-properties-docker"/>
            <label for="fog-instance-properties-docker">Enable Container Watchdog</label>
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            <input type="checkbox" class="filled-in" id="fog-instance-properties-hal"/>
            <label for="fog-instance-properties-hal">Enable Abstracted Hardware API</label>
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            &nbsp;
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            Provisioning Key: <span id="fog-instance-properties-provisioningkey">-</span>
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            <button class="waves-effect waves-light btn light-blue darken-1 tooltipped"
                    id="fog-instance-provision-button" data-position="bottom" data-delay="50"
                    data-tooltip="The provisioning key can only be used once and is only valid for the next 20 minutes.">
                Generate Provisioning Key
            </button>
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            &nbsp;
        </div>
    </div>
    <div class="bootstrap-iso">
        <div class="row">
            <div class="col s10 offset-s1 panel-group" id="accordion-fog-info">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion-fog-info" href="#collapse1">Fog
                                information</a>
                        </h3>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Instance ID:
                                    <span id="fog-instance-properties-instanceid">-</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    IP Address:
                                    <span id="fog-instance-properties-ipaddress">-</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Last Seen:
                                    <span id="fog-instance-properties-lastactive">-</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    System Time:
                                    <span id="fog-instance-properties-systemtime">-</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Local Status:
                                    <span id="fog-instance-properties-laststatustime">-</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Last Command:
                                    <span id="fog-instance-properties-lastcomandtime">-</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    ioFog Type:
                                    <span id="fog-instance-properties-fogtypename">-</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Daemon Status:
                                    <span id="fog-instance-properties-daemonstatus">-</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Daemon Duration:
                                    <span id="fog-instance-properties-daemonoperatingduration">-</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Daemon Start:
                                    <span id="fog-instance-properties-daemonlaststarttime">-</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Processed Msgs:
                                    <span id="fog-instance-properties-processedmessages">-</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Disk Usage:
                                    <span id="fog-instance-properties-diskusage">-</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Memory Usage:
                                    <span id="fog-instance-properties-memoryusage">-</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    CPU Usage:
                                    <span id="fog-instance-properties-cpuusage">-</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Network Interface:
                                    <span id="fog-instance-properties-networkinterface">-</span>
                                </div>
                            </div>
                            <br/>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Docker URL <input type="text" id="fog-instance-properties-dockerurl"
                                                      name="fog-instance-properties-dockerurl" value="">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Disk Usage Limit (GiB)<input type="text" id="fog-instance-properties-disklimit"
                                                                 name="fog-instance-properties-disklimit" value="">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Message Storage Directory <input type="text"
                                                                     id="fog-instance-properties-diskdirectory"
                                                                     name="fog-instance-properties-diskdirectory"
                                                                     value="">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Memory Usage Limit (MiB)<input type="text" id="fog-instance-properties-memorylimit"
                                                                   name="fog-instance-properties-memorylimit" value="">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    CPU Usage Limit (percent)<input type="text" id="fog-instance-properties-cpulimit"
                                                                    name="fog-instance-properties-cpulimit" value="">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Log File Directory <input type="text" id="fog-instance-properties-logdirectory"
                                                              name="fog-instance-properties-logdirectory" value="">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Log Disk Limit (GiB)<input type="text" id="fog-instance-properties-logdisklimit"
                                                               name="fog-instance-properties-logdisklimit" value="">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Log Rolling File Count<input type="text" id="fog-instance-properties-logfilecount"
                                                                 name="fog-instance-properties-logfilecount" value="">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Status Update Frequency (sec)<input type="text"
                                                                        id="fog-instance-properties-statusUpdate"
                                                                        name="fog-instance-properties-statusUpdate"
                                                                        value="">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Get Changes Frequency (sec)<input type="text"
                                                                      id="fog-instance-properties-getChanges"
                                                                      name="fog-instance-properties-getChanges"
                                                                      value="">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    Scan Devices Frequency (sec)<input type="text" id="fog-instance-properties-getScan"
                                                                       name="fog-instance-properties-getScan" value="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion-fog-info" href="#collapse2">Docker
                                Containers Info</a>
                        </h3>
                    </div>
                    <div id="collapse2" class="panel-collapse collapse">
                        <div class="panel-body">
                            <div>
                                <span id="docker-container-info-element"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion-fog-info" href="#collapse3">USB
                                Connections Info</a>
                        </h4>
                    </div>
                    <div id="collapse3" class="panel-collapse collapse">
                        <div class="panel-body">
                            <div>
                                <span id="usb-info-element"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion-fog-info" href="#collapse4">Hardware
                                Info</a>
                        </h4>
                    </div>
                    <div id="collapse4" class="panel-collapse collapse">
                        <div class="panel-body">
                            <div id="hw-info-element"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col s10 offset-s1">
            <a href="#deleteconfirmmodal" class="modal-trigger waves-effect waves-light btn red darken-4"
               id="fog-instance-delete-button">Delete this ioFog</a>
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            <a href="#rebootmodal" class="modal-trigger waves-effect waves-light btn red darken-4"
               id="fog-instance-reboot-button">Reboot this ioFog</a>
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            &nbsp;
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            <a href="#proxymodal" class="modal-trigger waves-affect waves-light">
                <button id="proxy-open-button" class="btn blue darken-4">Open SSH Tunnel</button>
            </a>
        </div>
        <div class="col s10 offset-s1">
            <a href="#" class="waves-affect waves-light">
                <button id="proxy-close-button" class="btn blue darken-4">Close SSH Tunnel</button>
            </a>
        </div>
    </div>
    <div class="bootstrap-iso">
        <div class="row">
            <div class="col s10 offset-s1">
                <div class="panel-group" id="accordion-proxy-info">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion-proxy-info"
                                   href="#collapse-proxy-info">Proxy information</a>
                            </h3>
                        </div>
                        <div id="collapse-proxy-info" class="panel-collapse collapse">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col s10 offset-s1">
                                        Username:
                                        <span id="proxy-instance-properties-username">-</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col s10 offset-s1">
                                        IP Address:
                                        <span id="proxy-instance-properties-host">-</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col s10 offset-s1">
                                        Remote port:
                                        <span id="proxy-instance-properties-rport">-</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col s10 offset-s1">
                                        Local port:
                                        <span id="proxy-instance-properties-lport">-</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col s10 offset-s1">
                                        Status:
                                        <span id="proxy-instance-properties-status">-</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col s10 offset-s1">
                                        Errors:
                                        <span id="proxy-instance-properties-errors">-</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col s10 offset-s1">
            &nbsp;
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            Version:
            <span id="fog-instance-properties-version">-</span>
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            <a href="#versionupgrademodal" class="modal-trigger waves-affect waves-light">
                <button id="version-upgrade-button" class="btn blue darken-4">Upgrade version</button>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            <a href="#versionrollbackmodal" class="modal-trigger waves-affect waves-light">
                <button id="version-rollback-button" class="btn blue darken-4">Rollback version</button>
            </a>
        </div>
    </div>
</div>
<div id="deleteconfirmmodal" class="modal modal-fixed-footer confirm-modal">
    <div class="modal-content">
        <h4>DELETE IOFOG</h4>
        <h5>Are you sure?</h5>
    </div>
    <div class="modal-footer">
        <a href="#" class="modal-action modal-close waves-effect waves-red btn-flat"
           onclick="$('#deleteconfirmmodal').closeModal(); return false;"><h6>NO</h6></a>
        <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat"
           id="delete-confirm-modal-yes-button"><h6>YES</h6></a>
    </div>
</div>
<div id="versionupgrademodal" class="modal modal-fixed-footer confirm-modal">
    <div class="modal-content">
        <h4>Upgrade IOFOG</h4>
        <h5>Are you sure?</h5>
    </div>
    <div class="modal-footer">
        <a href="#" class="modal-action modal-close waves-effect waves-red btn-flat"
           onclick="$('#versionupgrademodal').closeModal(); return false;"><h6>NO</h6></a>
        <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat"
           id="version-upgrade-modal-yes-button"><h6>YES</h6></a>
    </div>
</div>
<div id="versionrollbackmodal" class="modal modal-fixed-footer confirm-modal">
    <div class="modal-content">
        <h4>Rollback IOFOG</h4>
        <h5>Are you sure?</h5>
    </div>
    <div class="modal-footer">
        <a href="#" class="modal-action modal-close waves-effect waves-red btn-flat"
           onclick="$('#versionrollbackmodal').closeModal(); return false;"><h6>NO</h6></a>
        <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat"
           id="version-rollback-modal-yes-button"><h6>YES</h6></a>
    </div>
</div>
<div id="rebootmodal" class="modal modal-fixed-footer confirm-modal">
    <div class="modal-content">
        <h4>REBOOT IOFOG</h4>
        <h5>Are you sure?</h5>
    </div>
    <div class="modal-footer">
        <a href="#" class="modal-action modal-close waves-effect waves-red btn-flat"
           onclick="$('#rebootmodal').closeModal(); return false;"><h6>NO</h6></a>
        <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat"
           id="reboot-confirm-modal-yes-button"><h6>YES</h6></a>
    </div>
</div>

<div id="proxymodal" class="modal modal-sm modal-fixed-footer">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title" id="proxyModalLabel">Enter ssh proxy info</h4>
        </div>
        <div class="modal-body">
            <form class="form-horizontal">
                <div class="form-group form-group-lg">
                    <label for="proxy-username" class="col-form-label">Username:</label>
                    <input type="text" class="form-control" id="input-proxy-username">
                </div>
                <div class="form-group form-group-lg">
                    <label for="proxy-password" class="col-form-label">Password:</label>
                    <input type="text" class="form-control" id="input-proxy-password">
                </div>
                <div class="form-group form-group-lg">
                    <label for="proxy-host" class="col-form-label">Address:</label>
                    <input type="text" class="form-control" id="input-proxy-address">
                </div>
                <div class="form-group form-group-lg">
                    <label for="proxy-remote-port" class="col-form-label">Remote port:</label>
                    <input type="text" class="form-control" id="input-proxy-remote-port">
                </div>
                <div class="form-group form-group-lg">
                    <label for="proxy-local-port" class="col-form-label">Local port:</label>
                    <input type="text" class="form-control" id="input-proxy-local-port">
                </div>
                <div class="form-group form-group-lg">
                    <label for="proxy-rsa-key" class="col-form-label">RSA key:</label>
                    <textarea class="form-control" id="input-proxy-rsa-key"></textarea>
                </div>
            </form>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="modal-action modal-close waves-effect waves-red btn-flat"
           onclick="$('#deleteconfirmmodal').closeModal(); return false;"><h6>Close</h6></a>
        <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat" id="proxy-modal-open-button"><h6>
                Open</h6></a>
    </div>
</div>

<!--         <div id="add-bluebox" class="modal bluebox-modal">
            <div class="modal-content">
                <div class="row headroom60">
                    <div class="col s10 offset-s1">
                        Token <input type="text" value="" id="bluebox-token" name="bluebox-token">
                    </div>
                </div>
                <div class="row headroom60">
                    <div class="col s12 center-align">
                        <button class="modal-action modal-close waves-effect waves-light btn light-blue darken-1" id="bluebox-confirm-button" onclick="addBlueBox()">&nbsp;&nbsp;Add&nbsp;&nbsp;</button>&nbsp;&nbsp;
                        <button class="modal-action modal-close waves-effect waves-light btn red darken-1" id="bluebox-cancel-button">Cancel</button>
                    </div>
                </div>
            </div>
        </div> -->

<!--Javascript_________________________________________-->
<!--Import jQuery before materialize.js-->
<script type="text/javascript">
	var selectedInstance = '';
</script>

<script type="text/javascript" src="/js/libs/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/js/libs/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/libs/ejs.min.js"></script>
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

<script type="text/javascript"> var fogControllerUrl = '<%= fogControllerUrl %>' </script>
<script type="text/javascript" src="/js/urls.js"></script>
<script type="text/javascript" src="/js/appworks.js"></script>
<script type="text/javascript" src="/js/fog/templates.js"></script>
<script type="text/javascript" src="/js/fog/base.js"></script>
<script type="text/javascript" src="/js/fog/fog-interface.js"></script>
<script type="text/javascript" src="/js/libs/bootstrap.min.collapse.js"></script>


</body>
</html>