<style>
    .hide {
        display: none
    }

    #fair-cells-form {
        padding: 1em 0 2em 0;
    }
    #fair-cells-form h4 {
        margin: 0;
        padding: 0 0 0.5em 1em;
    }
    .flex-outer {
        padding: 0;
    }
    .flex-outer li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 0 2em;
    }
    .flex-outer > li > label,
    .flex-outer > li > p {
    /* .flex-outer > li > div { */
        flex: 1 0 120px;
        max-width: 220px;
    }
    #cell-preview {
        margin: 0.75em 0;
    }
    .divider {
        border-top: 1px solid #e5e5e5;
        margin-top: 2em;
        padding-top: 1em;
    }
    .modal-body {
        padding: 0 !important;
    }

    .loader {
    position: fixed;
    left: 250px;
    top: 250px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    green;
    border-bottom: 16px solid red;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    }


/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

<ul id="tabs" class="nav nav-tabs">
    <li id="btn-tab-build" class="active">
        <a href="#build" data-toggle="tab">Build</a>
    </li>
    <li id="btn-tab-run">
        <a href="#run" data-toggle="tab">Run</a>
    </li>
    <li id="btn-tab-publish">
        <a href="#publish" data-toggle="tab">Publish</a>
    </li>
    <li id="btn-tab-about">
        <a href="#about" data-toggle="tab">About</a>
    </li>
</ul>

<form id="fair-cells-form">
    <div id="loader" class="loader hide"></div>
    <ul id="fair-cells-build" class="flex-outer">
        <h4>Build</h4>
        <li>
            <label for="image-name">Image name:</label>
            <input id="image-name" value="cloudcells/cell"/>
        </li>
        <li>
            <label for="base-image">Base image:</label>
            <select id="base-image" name="base-image" form="create-form">
                {% for display, image in images %}
                    <option value="{{ image }}">{{ display }}</option>
                {% end %}
            </select>
        </li>
        <li>
            <label for="cell-index">Cell:</label>
            <select id="cell-index" form="create-form">
                
            </select>
            
        </li>
        <li>
            <p>Preview:</p>
            <div id="cell-preview"></div>
        </li>
        <li>
            <label for="environment-area">Conda environment.yml:</label>
            <textarea id="environment-area" cols="50" rows="7" type="textarea"></textarea>
        </li>
        <li id="kernel-specific">
        </li>
        <li>
            <p>
                <input id="build-dockerfile-button" type="submit" value="Build Dockerfile"/>
            </p>
            <p id="build-dockerfile-notify"></p>
        </li>
        <li>
            <p>Dockerfile:</p>
            <textarea id="build-dockerfile-output" cols="50" rows="5" type="textarea" disabled></textarea>
        </li>
        <li>
            <p>
                <input id="build-container-button" type="submit" value="Build"/>
            </p>
            <p id="build-notify"></p>
        </li>
        <li>
            <p>Build logs:</p>
            <textarea id="build-output" cols="50" rows="5" type="textarea" disabled></textarea>
        </li>
    </ul>

    <ul id="fair-cells-run" class="flex-outer hide">
        <h4>Run</h4>

         <div id="docker-run" style="width:400px; height:200px; overflow:auto;">
<!--        <li>-->
<!--            <table cellspacing="1" cellpadding="1" border="1" width="300" id="image-table2">-->
<!--            <tr>-->
<!--                <th>Image</th>-->
<!--            </tr>-->
<!--        </table>-->
        </li>

        <li>
            <label for="run-port">Port:</label>
            <input id="run-port" value="10000" type="number"/>
        </li>
        <li>
            <label for="container-status">Status:</label>
            <input id="container-status" value="idle" type="text" disabled/>
        </li>
        <li>
            <div>
                <input id="run-button" type="submit" value="Run"/>
                <input id="status-button" type="submit" value="Status"/>
                <input id="stop-button" type="submit" value="Stop"/>
            </div>
        </li>
             </div>
    </ul>

    <ul id="fair-cells-publish" class="flex-outer ">
        <h4>Publish</h4>
        <div id="docker-login">
             <h5>Login</h5>
            <li>

                <label for="docker-registry">Docker Registry:</label>
                <input type="url" id="docker-registry" size=30 value="https://index.docker.io/v1/"/>
            </li>
            <li>
                <label for="docker-registry-username">Docker Repository Username:</label>
                <input id="docker-registry-username" value=""/>
            </li>
            <li>
                <label for="docker-registry-token">Password or authorization token:</label>
                <input type="password" id="docker-registry-token" name="docker-registry-token"><br><br>
            </li>
            <li>
                <p>
                    <input id="docker-registry-login-button" type="submit" value="Login"/>
                </p>
            </li>
       </div>
        <div id="docker-publish" style="width:400px; height:200px; overflow:auto;">
             <h5>Publish Image</h5>
<!--            <li>-->
<!--                <table cellspacing="1" cellpadding="1" border="1" width="300" id="image-table">-->
<!--                    <tr>-->
<!--                        <th>Image</th>-->
<!--                    </tr>-->
<!--                </table>-->
<!--            </li>-->
            <li>
                <p>
                    <input id="publish-images-button" type="submit" value="Publish"/>
                </p>
            </li>
       </div>
    </ul>

    <ul id="fair-cells-about" class="flex-outer hide">
        <h4>About</h4>

        <p style="margin-left: 5%;">
            FAIR-Cells is developed by the research team for Quality Critical Distributed Computing (QCDIS) in the
            Multi Scale Networking System Group (MNS) of the University of Amsterdam. The development of FAIR-Cells is
            coordinated by Dr. Zhiming Zhao: <a href="mailto:z.zhao@uva.nl">z.zhao@uva.nl</a></p>

        <p style="margin-top: 5%;margin-left: 5%;">
            Developers:
        <li style="margin-left: 5%;">
            W. Kruijer <a href="mailto:wilcokruijer@gmail.com">wilcokruijer@gmail.com</a>
        </li>
        <li style="margin-left: 5%;">
            S. Koulouzis <a href="mailto:S.Koulouzis@uva.nl">S.Koulouzis@uva.nl</a>
        </li>
        </p>

        <p style="text-align:right;margin-right: 5%;">

            <img src="https://mns-research.nl/images/logo_hua931301caa9e2c039e68fbb874deb22a_17897_0x70_resize_lanczos_2.png" alt="MnS"  width="15%" height="15%">
            <img src="https://bynder-public-eu-central-1.s3.amazonaws.com/media/9E3E0032-62BD-4694-A3CCB1BC17CA3CAF/820AE599-3321-4FD3-96AAF5D0926A84C2/webimage-ED0F2C5B-4DB7-4916-8A9990566EFDA309.png" alt="UvA" width="10%" height="10%">

<!--            <img src="https://www.lifewatch.eu/image/journal/article?img_id=1307465&t=1542636417563" alt="LifeWatch"  width="80" height="50">-->
<!--            <img src="https://envri.eu/wp-content/uploads/2019/10/envri_logo_final-1.jpg" alt="envri"  width="80" height="50">-->
        </p>
    </ul>






</form>
