{% extends 'base.html' %}

{% load static %}

{% block title %}
    Links list
{% endblock %}

{% block content %}
    
    <br />
    <h3>SIN3D-app links generator</h3>
    <br />

    <hr />

    <div class="row">
        <div class="col-md-4 offset-md-1">
            <h5>Generate new SIN3D-app link</h5>

            <p align="center">
                <img src="media/expe.png" width="30%">
            </p>

            <div id="generateInfo" class="alert alert-dismissible alert-success" style="display:none;">
                <button id="generateInfoClose" type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
            </div>

            <form method="POST" action="#">
                
                {% csrf_token %}

                <div class="form-group">
                    <label for="guildId">Experiment ID</label>
                    <select class="form-control" id="guildId" name="guildId">
                        {% for key, value in configurations.items %}
                            <option value="{{key}}">{{value}}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="userId">User ID</label>
                    <input type="text" id="userId" class="form-control" name="userId" placeholder="Enter your user identifier"/>
                    <div id="userIdFeedback"></div>
                </div>

                <button id="generateButton" type="button" class="btn btn-success" disabled>Generate</button>
            </form>
        </div>
        <div id="displayLinks" class="col-md-6 offset-md-1">
        </div>
    </div>

    <br />
    <hr />
    <br />
{% comment %} 
    <ul class="list-group">
        <li class="list-group-item">                
            <div class="row">
                <div class="col-md-11"><a id="calibration-link" href="#">Calibration link</a></div>
            </div>
        </li>
    </ul> {% endcomment %}

{% endblock %}

{% block javascripts %}
    <script type="text/javascript"> 
        // Utils informations
    </script>
    <script src="{% static 'js/displayLinks.js' %}"></script>
    <script src="{% static 'js/links.js' %}"></script>

{% endblock %}