{% 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 mx-0 px-0">#}
    {#        <div class="row flex-row flex-nowrap">#}
    {#            {% for event_data in contexts  %}#}
    {#                <div class="col border-start border-end">#}
    {#                    <div class = "border-bottom">#}
    {#                        <h4>{{ event_data.event.data.formatted_title }}</h4>#}
    {#                        <h6 class="text-muted" >{{ event_data.data.start_date }}</h6>#}
    {#                    </div>#}
    {#                    {% include 'teamsnap/lineup/widgets/lineup.html' with formset_lineup=event_data.formset_lineup formset_bench=event_data.formset_bench event_id=event_data.event.data.id  %}#}
    {#                </div>#}
    {#            {% endfor %}#}
    {#        </div>#}
    {#    </div>#}
    <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 %}
                        </td>
                    {% endfor %}
                </tr>
                </tbody>
            </table>
        </div>
    </div>

{% endblock %}

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

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

{% endblock %}