{% extends "base.html" %}{% load static %}
{% block title %} Edit Lineups {% endblock %}
{#{% block page_heading %}Edit Lineups{% endblock %}#}
{#{% block page_subheading %}{% endblock %}#}

{% block content %}
  <div class="container overflow-scroll">
    <div id="popup-messages-content">
    </div>
    <div class="row flex-row flex-nowrap">
      <table>
        <tbody>
        <tr class="align-top mx-1">
          {% for event_data in contexts %}
            <td class="px-1">
              {% include "lineup/widgets/lineup.html" with event=event_data.event event_id=event_data.event.data.id formset=event_data.formset formset_startinglineup=event_data.formset_startinglineup formset_bench=event_data.formset_bench formset_out=event_data.formset_out formset_startingpositionalonly=event_data.formset_startingpositionalonly availability_summary=event_data.availability_summary %}
            </td>
          {% endfor %}
        </tr>
        </tbody>
      </table>
    </div>
  </div>
{% endblock %}

{% block inline_javascript %}
  {{ block.super }}
  <script src="{% static 'js/Sortable.js' %}"></script>
  <script src="{% static 'lineup/js/lineup.js' %}"></script>
  <script>
    window.addEventListener('DOMContentLoaded', () => {
      /* Run whatever you want */
      const postForms = document.querySelectorAll("[id^=form-lineup]");
      const postSubmits = document.querySelectorAll("[id^=submit-lineup]");
      for (postSubmit of postSubmits) {
        function handleSubmit(postSubmit) {
          postSubmit.addEventListener("click", e => {
            e.preventDefault();
            formData = new FormData(postSubmit.form);
            fetch(postSubmit.formAction, {
              method: 'POST',
              body: formData,
            })
              .then(response => response)
              .then(data => {
                if (data.ok) {
                  document.querySelector("#popup-messages-content").innerHTML = `<div class="alert alert-dismissible alert-success" role="alert">
                                                                  <strong>Success!</strong>
                                                                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                                                </div> `
                }
                else {
                  document.querySelector("#popup-messages-content").innerHTML = `<div class="alert alert-dismissible alert-danger" role="alert">
                                                                  <strong>Not Success! Returned `+data.status+`: ` + data.statusText + `</strong>
                                                                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                                                </div> `
                }
              })
              .catch((error) => {
                console.error('Error:', error);
              });
          })
        }

        handleSubmit(postSubmit)
      }
    });
  </script>

{% endblock %}
