    <!DOCTYPE html>
    <html>
    <head>
        <!--Import materialize.css-->
        <!-- <link type="text/css" rel="stylesheet" href="/css/libs/materialize.css" media="screen,projection"/> -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.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 class="header-bar-navigation-selected">build</li>
                </a>
                <a href = "/authoring/publishing">
                    <li>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="build-track-toolbar">
        <div class="build-track-toolbar-item-container" style="width:200px;">
            <select id="track-select-dropdown">
                
            </select>
        </div>
        <div class="build-track-toolbar-item-container">
            <a href="#createtrack" class="modal-trigger waves-effect waves-light btn grey" id="track-create-button">+ New Track</a>
        </div>
        <div class="build-track-toolbar-item-container">
            <a href="#updatetrack" class="modal-trigger waves-effect waves-light btn grey" id="track-update-button">Rename Track</a>
        </div>
<!--        <div class="build-track-toolbar-item-container" style="display:none;">-->
<!--            <a href="#" class="waves-effect waves-light btn grey" id="track-activate-button">Activate Track</a>-->
<!--        </div>-->
        <div class="build-track-toolbar-item-container">
            <a href="#" class="waves-effect waves-light btn grey" id="track-deactivate-button">Activate Track</a>
        </div>
        <div class="build-track-toolbar-item-container">
            <a href="#trackdeleteconfirmmodal" class="modal-trigger waves-effect waves-light btn red darken-4" id="track-delete-button">Delete Track</a>
        </div>
    </div>


    <div class="build-toolbox">
        <div class="row headroom20">
            <div id="catalogElementContainer" class="col s12">
            </div>
        </div>
    </div>

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

    <div class="build-properties">
        <div style="display:none;" class="build-properties-loading-overlay">
            <div class="build-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="input-field col s10 offset-s1">
                <input type="text" id="element-instance-properties-name" name="element-instance-properties-name" value="">
                <label>Name</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s10 offset-s1">
                <select id="element-instance-properties-fog-instance">
                    <option value="NONE" selected>No ioFog instance</option>
                </select>
                <label>ioFog to run this element</label>
            </div>
        </div>
        <div class="row">
            <div class="col s10 offset-s1">
                Element status : <span id="element-instance-properties-element-status">UNKNOWN</span>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s10 offset-s1">
                <textarea class="materialize-textarea" id="element-instance-properties-config" name="element-instance-properties-config" style="resize: none">{}</textarea>
                <label for="element-instance-properties-config">Configuration JSON</label>
            </div>
        </div>
        <div class="row">
            <div class="col s10 offset-s1 wordwrap">
                Configuration example : <span id="element-instance-properties-config-example">{}</span>
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="input-field col s10 offset-s1">
                <textarea class="materialize-textarea" id="element-instance-properties-volumes" name="element-instance-properties-volumes" style="resize: none">{}</textarea>
                <label for="element-instance-properties-volumes">Volume Mappings (JSON)</label>
            </div>
        </div>
        <div class="row">
            <div class="col s10 offset-s1 wordwrap">
                Example :
                <span id="element-instance-properties-config-example">
                    {"volumemappings": [{"hostdestination": "HOST DIR", "containerdestination": "CONTAINER DIR", "accessmode": "ACCESS MODE"}, ...]}
                </span>
            </div>
        </div>
        <br/>

        <div class="row headroom20">
            <div class="input-field col s10 offset-s1">
                <input type="text" id="element-instance-properties-logsize" name="element-instance-properties-logsize" value="">
                <label>Container Log Limit (MiB)</label>
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="col s10 offset-s1">
                <a href="#" class="waves-effect waves-light btn light-blue darken-1" id="element-instance-rebuild-button">Rebuild Container</a>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s10 offset-s1">
                <input type="checkbox" class="filled-in" id="element-instance-properties-rootaccess" />
                <label for="element-instance-properties-rootaccess">Grant host access</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s10 offset-s1">
                <input type="checkbox" class="filled-in" id="element-instance-properties-strace" />
                <label for="element-instance-properties-strace">Enable Strace</label>
            </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="#" class="waves-effect waves-light btn light-blue darken-1" id="element-instance-strace-button">Download Strace logs</a>
            </div>
        </div>
        <div class="row">
            <div class="col s10 offset-s1">
                <a href="#portelement" class="modal-trigger waves-effect waves-light btn light-blue darken-1" id="element-instance-port-button" data-element-instance-id="">Manage ports</a>
            </div>
        </div>
        <div class="row">
            <div class="col s10 offset-s1">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <div class="col s10 offset-s1">
                <button href="#createImage" class="btn light-blue darken-1"
                   id="element-instance-create-image-button" data-element-instance-id="">Create image</button>
            </div>
        </div>
        <div class="row">
            <div class="col s10 offset-s1">
                <button href="#downloadImage" class="btn light-blue darken-1"
                   id="element-instance-download-image-button" data-element-instance-id="">Download 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">
                <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>

        <!-- MODAL WINDOWS -->
    <!--New Track-->
    <div id="createtrack" class="modal modal-fixed-footer">
      <div class="modal-content">
        <h4>Create a new track</h4>
            <div class="input-field col s12">
                &nbsp;
            </div>
            <div class="input-field col s12">
                &nbsp;
            </div>
            <div class="input-field col s12">
                <input id="auth-create-track-trackname" type="text">
                <label for="auth-create-track-trackname">Name</label>
            </div>
      </div>
      <div class="modal-footer">
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat" id="auth-create-track-button-confirm">Create</a>
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat" id="auth-create-track-button-cancel">Cancel</a>
      </div>
    </div>
    
    <!--Update Track-->
    <div id="updatetrack" class="modal modal-fixed-footer">
      <div class="modal-content">
        <h4>Update track</h4>
            <div class="input-field col s12">
                &nbsp;
            </div>
            <div class="input-field col s12">
                &nbsp;
            </div>
            <div class="input-field col s12">
                <input placeholder="A meaningful label" id="auth-update-track-trackname" type="text">
                <label class="active" for="auth-update-track-trackname">Name</label>
            </div>
      </div>
      <div class="modal-footer">
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat" id="auth-update-track-button-confirm">Save</a>
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat" id="auth-update-track-button-cancel">Cancel</a>
      </div>
    </div>

    <!--Update Element Ports-->
    <div id="portelement" class="modal modal-large modal-fixed-footer">
      <div class="modal-content" id="element-ports-container">
        <h4>Manage ports for element</h4>
            <div class="input-field col s12 devisualed" id="element-ports-anchor">
                <span class="element-ports-figure">Internal port: 80</span><span class="element-ports-figure">External port: 5500</span><span class="element-ports-figure">Access URL: https://comsat1.iofog.org:37810</span><a class="element-ports-figure auth-port-element-remove-port" href="#" data-elementid="BLANK"><i class="fa fa-remove"></i></a>
          </div>
          <div class="row">
            <div class="input-field col s12">
                &nbsp;
            </div>
          </div>
          <div class="row">
            <div class="input-field col s3">
                <input placeholder="ex. 80" id="auth-port-element-internalport" type="text">
                <label class="active" for="auth-port-element-internalport">Internal Port</label>
              </div>
              <div class="input-field col s3">
                <input placeholder="ex. 5500" id="auth-port-element-externalport" type="text">
                <label class="active" for="auth-port-element-externalport">External Port</label>
              </div>
              <div class="input-field col s3">
                <input type="checkbox" class="filled-in" id="auth-port-element-publicaccess" />
                <label for="auth-port-element-publicaccess">Cloud Access</label>
              </div>
              <div class="input-field col s3">
                <a class="waves-effect waves-light btn" id="auth-port-element-add-button">Add Port</a>
              </div>
          </div>
      </div>
      <div class="modal-footer">
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat" id="auth-port-element-button-cancel">Close</a>
      </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>
            <p>
                <input type="checkbox" id="deleteElementWithCleanUp" checked="false"/>
                <label for="deleteElementWithCleanUp">with clean up (of image, volumes)</label>
            </p>
        </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="trackdeleteconfirmmodal" class="modal modal-fixed-footer confirm-modal">
        <div class="modal-content">
            <h4>DELETE TRACK</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="$('#trackdeleteconfirmmodal').closeModal(); return false;"><h6>NO</h6></a>
            <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat" id="track-delete-confirm-modal-yes-button"><h6>YES</h6></a>
        </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" src="/js/libs/jsPlumb-2.1.1-min.js"></script>
    <script type="text/javascript" src="/js/urls.js"></script>
    <script type="text/javascript" src="/js/libs/filesaver.js"></script>

    <script type="text/javascript"> var fogControllerUrl = '<%= fogControllerUrl %>' </script>
    <script type="text/javascript" src="/js/appworks.js"></script>
    <script type="text/javascript" src="/js/build/templates.js"></script>
    <script type="text/javascript" src="/js/build/base.js"></script>
    <script type="text/javascript" src="/js/build/build-interface.js"></script>

    </body>
    </html>