<!DOCTYPE html>
<html>
<head>
    <!--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 class="header-bar-navigation-selected">publish</li>
                </a>
                <a href="/authoring/fog">
                    <li>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="element-toolbox">
    <div class="row headroom20">
        <div class="col s10 offset-s1">
            <a href="#importMicroservice" class="modal-trigger waves-effect waves-light btn light-blue darken-1"
               id="fog-instance-importMicroservice-button">Import</a>
        </div>
    </div>
    <div class="row headroom20">
        <div id="fogTypesContainer" class="col s12">
            <div class='element-type-container' data-element-type='new' data-element-type-image='default.png'>
                <img class='element-type-icon' src='/images/shared/default.png'>
                <p><strong>New element</strong></p>
            </div>
        </div>
    </div>
</div>

<div class="element-canvas">
    <div id="element-canvas-layout-grid">
    </div>
</div>

<div class="element-properties">
    <div style="display:none;" class="element-properties-loading-overlay">
        <div class="element-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="element-properties-name" name="element-properties-name"
                        value="">
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            Description <input type="text" id="element-properties-description" name="element-properties-description"
                               value="">
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            Category <input type="text" id="element-properties-category" name="element-properties-category"
                            value="">
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            x86 Container Image <input type="text" id="element-properties-containerimage-x86"
                                       name="element-properties-containerimage-x86" value="">
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            arm Container Image <input type="text" id="element-properties-containerimage-arm"
                                       name="element-properties-containerimage-arm" value="">
        </div>
    </div>

    <div class="row">
        <div class="input-field col s10 offset-s1">
            <select id="dockerRegistrySelect">
            </select>
            <label>Docker Registry</label>
        </div>
    </div>

    <div class="row">
        <div class="col s10 offset-s1">
            Publisher <input type="text" id="element-properties-publisher" name="element-properties-publisher"
                             value="">
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            Disk Space Required (GiB) <input type="text" id="element-properties-diskrequired"
                                             name="element-properties-diskrequired" value="">
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            RAM Required (MiB) <input type="text" id="element-properties-ramrequired"
                                      name="element-properties-ramrequired" value="">
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            Input Information Type <input type="text" id="element-properties-inputinfotype"
                                          name="element-properties-inputinfotype" value="">
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            Input Information Format <input type="text" id="element-properties-inputinfoformat"
                                            name="element-properties-inputinfoformat" value="">
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            Output Information Type <input type="text" id="element-properties-outputinfotype"
                                           name="element-properties-outputinfotype" value="">
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            Output Information Format <input type="text" id="element-properties-outputinfoformat"
                                             name="element-properties-outputinfoformat" value="">
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            &nbsp;
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            <form id="photo_upload" method="post" enctype="multipart/form-data"
                  action="/api/v2/authoring/element/icon/upload/moduleid/7">
                <input name="elementicon" type="file">
                <input type="hidden" id="file-upload-access-token-holder" name="t">
                <input type="hidden" id="file-upload-module-id" value="7">
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            <button class="waves-effect waves-light btn light-blue darken-1"
                    id="element-icon-upload-button">Change Icon Image
            </button>
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            &nbsp;
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            Configuration Example <textarea class="materialize-textarea" id="element-properties-configform"
                                            name="element-properties-configform"
                                            placeholder='{"configfield1":"sample value","configfield2":77}'></textarea>
        </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="#deleteconfirmmodal" class="modal-trigger waves-effect waves-light btn red darken-4"
               id="fog-instance-delete-button">Delete this element</a>
        </div>
    </div>
    <div class="row">
        <div class="col s10 offset-s1">
            &nbsp;
        </div>
    </div>
</div>
</div>

<div id="deleteconfirmmodal" class="modal modal-fixed-footer confirm-modal">
    <div class="modal-content">
        <h4>DELETE ELEMENT</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="addRegistryModal" class="modal">
    <div class="modal-header">
        <h5 style="margin-left: 20px;">Add new registry</h5>
    </div>
    <div class="modal-body" style="padding: 24px 24px 0 24px">
        <div class="input-field">
            <input type="text" id="addRegistryUrlField" value=""/>
            <label for="addRegistryUrlField">URL</label>
        </div>
        <p>
            <input type="checkbox" id="addRegistryIsPublicField" checked="true"/>
            <label for="addRegistryIsPublicField">Public</label>
        </p>
        <div class="input-field add-registry-non-public">
            <input type="text" id="addRegistryUsernameField" class="add-registry-non-public" value=""/>
            <label for="addRegistryUsernameField" class="add-registry-non-public">Docker ID</label>
        </div>
        <div class="input-field add-registry-non-public">
            <input type="password" id="addRegistryPasswordField" class="add-registry-non-public" value=""/>
            <label for="addRegistryPasswordField" class="add-registry-non-public">Password</label>
        </div>
        <div class="input-field add-registry-non-public">
            <input type="text" id="addRegistryEmailField" class="add-registry-non-public" value=""/>
            <label for="addRegistryEmailField" class="add-registry-non-public">Email</label>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="modal-action waves-effect waves-red btn-flat"
           onclick="$('#addRegistryModal').closeModal(); clearAddRegistryModal(); return false;"><h6>Cancel</h6></a>
        <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat"
           onclick="addRegistry()"><h6>OK</h6></a>
    </div>
</div>

<div id="importMicroservice" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Import microservice</h5>
        </div>
        <div class="modal-body">
            <input id="element-instance-properties-import-microservice"
                   type="text" name="element-instance-properties-import-microservice" value="">
        </div>
        <div class="modal-footer">
            <a href="#" type="button" class="btn-flat waves-effect waves-green"
               onclick="onImportMicroserviceClick()"
               id="import-microservice-modal-yes-button">Import</a>
            <a href="#" type="button" class="btn-flat modal-action modal-close waves-effect waves-red"
               data-dismiss="modal">Close</a>
        </div>
    </div>
</div>

<!--Javascript_________________________________________-->
<!--Import jQuery before materialize.js-->
<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 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/publish/templates.js"></script>
<script type="text/javascript" src="/js/publish/base.js"></script>
<script type="text/javascript" src="/js/publish/publishing-interface.js"></script>

</body>
</html>