<form id="form">
  {% csrf_token %}

  <div class="mb-3">
    <label class="col-form-label" for="session_config">
      {# the label and help_text are different for mturk #}
      {{ form.session_config.label }}
    </label>
    {{ form.session_config }}
  </div>

  <div class="mb-3">
    <label class="col-form-label" for="num_participants">
      {# the label and help_text are different for mturk #}
      {{ form.num_participants.label }}
    </label>
    <div class="controls">
      {{ form.num_participants }}
      {% for config in configs %}
        <div id="lcm-{{ config.name }}" class="lcm"
             style="display:none">
          <p>Must be a multiple of {{ config.get_lcm() }}</p></div>
      {% endfor %}
      <p class="help-block">{{ form.num_participants.description }}</p>
    </div>
  </div>

  {% if form.is_mturk.object_data %}
    <input id="is_mturk" name="is_mturk" type="hidden" value="y">
  {% endif %}
  {{ form.room_name }}

  <div>
    <input class="btn btn-primary"
           value="Create"
           id="btn-create-session"
           type="submit">
  </div>
  <br>

  <progress id="create-session-wait" style="display:none"></progress>
  <div id="create-session-progress" style="display:none; margin-top: 10px; font-style: italic;"></div>
  <div id="create-session-error" class="alert alert-danger" style="display:none"></div>
  <br>
  {% for config in configs %}

    <div class="config" id="config-{{ config.name }}" style="display: none">
      <div class="edit-config"
           id="edit-config-{{ config.name }}">
        <h5>
          <a data-bs-toggle="collapse"
             href="#edit-config-table-{{ config.name }}"
             class="btn-block">
            Configure session
            <img src='{% static "glyphicons/cogwheel.png" %}'>
          </a>
        </h5>
        <div class="collapse"
             id="edit-config-table-{{ config.name }}">
          {% if config.custom_editable_fields() %}
            <h5>Custom</h5>
            <table class="table">
              {% for field in config.custom_editable_fields_html() %}
                {{ field|safe }}
              {% endfor %}
            </table>
          {% else %}
            <p><i>
              You can make more properties configurable
              by adding them to your session config in
              settings.py.
            </i></p>
          {% endif %}

          {# we only need to clarify that these are built-in if there are also custom ones #}
          {% if config.custom_editable_fields() %}
            <h5>General</h5>{% endif %}
          <table class="table">
            {% for field in config.builtin_editable_fields_html() %}
              {{ field|safe }}
            {% endfor %}
          </table>
        </div>
      </div>

      {% with config=config %}
        {% include "otree/includes/SessionInfo.html" %}
      {% endwith %}
    </div>

  {% endfor %}
</form>

<script>

    function showSessionConfigInfo(sessionconfigname) {
        $('.summary').hide();
        $('.config').hide();
        $('#config-' + sessionconfigname).show();
        $('.lcm').hide();
        $('#lcm-' + sessionconfigname).show();
    }

    $(document).ready(function () {
        let dropdown = $('[name=session_config]')
        $('.summary').hide();
        $('.config').hide();
        $('.lcm').hide();
        var current_session_config = dropdown.val();
        if (current_session_config) {
            showSessionConfigInfo(current_session_config);
        }

        dropdown.change(function () {
            showSessionConfigInfo(dropdown.val());
        })

        let $createSessionError = $("#create-session-error");
        let $createSessionWait = $("#create-session-wait");
        let $createSessionProgress = $("#create-session-progress");
        let socket = makeReconnectingWebSocket("/create_session");
        let $btnCreateSession = $('#btn-create-session');
        $btnCreateSession.click(function (e) {
            $btnCreateSession.prop('disabled', true);
            $createSessionError.hide();
            $createSessionProgress.hide();
            $createSessionWait.show();

            let ary = $('#form').serializeArray();
            let form_data = {};
            for (let entry of ary) {
                form_data[entry.name] = entry.value;
            }
            socket.send(JSON.stringify(form_data));
            e.preventDefault();
        });

        // handle incoming messages
        socket.onmessage = function (message) {
            let data = JSON.parse(message.data);
            if (data.progress) {
                $createSessionProgress.text(data.progress);
                $createSessionProgress.show();
            } else if (data.traceback) {
                $createSessionWait.hide();
                $createSessionProgress.hide();
                $createSessionError.text(data.error);
                $createSessionError.append('<pre>' + data.traceback + '</pre>');
                $createSessionError.show();
                $btnCreateSession.prop('disabled', false);
            } else if (data.validation_errors) {
                $createSessionWait.hide();
                $createSessionProgress.hide();
                $createSessionError.text(JSON.stringify(data.validation_errors));
                $createSessionError.show();
                $btnCreateSession.prop('disabled', false);
            } else if (data.session_url) {
                // because the user could press back button later
                $createSessionError.hide();
                $createSessionProgress.hide();
                $createSessionWait.hide();
                window.location.href = data.session_url;
                return; // so that we don't re-enable create button
            } else {
                $createSessionWait.hide();
                $createSessionProgress.hide();
                $createSessionError.text("Unexpected error: " + message.data);
                $createSessionError.show();
                $btnCreateSession.prop('disabled', false);
            }
        }
    });
</script>
