{% extends "base_logged_in.html" %}
{% load i18n %}
{% load static %}
{% load crispy_forms_tags %}

{% block title %}{% trans "notifikaceProjekty.templates.pesList.title" %}{% endblock %}
{% block head %}
 <!-- Autocomplete media files -->
 <link href="{% static 'admin/css/vendor/select2/select2.css' %}" media="screen" rel="stylesheet" type="text/css">
 <link href="{% static 'admin/css/autocomplete.css' %}" media="screen" rel="stylesheet" type="text/css">
 <link href="{% static 'autocomplete_light/select2.css' %}" media="screen" rel="stylesheet" type="text/css">
 <script src="{% static 'admin/js/vendor/select2/select2.full.js' %}"></script>
 <script src="{% static 'autocomplete_light/autocomplete_light.js' %}"></script>
 <script src="{% static 'autocomplete_light/select2.js' %}"></script>
 <script src="{% static 'autocomplete_light/i18n/cs.js' %}"></script>
 {% endblock %}

{% block content %}
    <div class="card app-card-form">
        <div class="card app-card-form app-card-inner">
          <form method="post" class="mb-3 submit-spinner" action="{% url 'notifikace_projekty:zapsat' %}">
            {% csrf_token %}
            <div class="card-header">
              <div class="app-fx app-left">
                <h5>{% trans "notifikace_projekty.templates.pes_list.PesNotifikace.title" %}</h5>
              </div>
          </div>
            <div class="card-body formset-table">
                    {% crispy form_notifications %}
            </div>
            {% for formset in formsets %}
            <div class="card-header">
              <div class="app-fx app-left">
                <h5>{{formset.name}}</h5>
              </div>
            </div>
            <div class="card-body formset-table">
                    {% crispy formset.form pes_helper %}
            {% if forloop.last %}
            <button type="submit" id="editPesSubmitButton" class="btn btn-primary">{% trans "notifikaceProjekty.templates.pesList.submitButton" %}
              <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"
              style="display: none"></span>
            </button>
            {% endif %}
            </div>
            {% endfor %}
          </form>
          </div>
    </div>
    <div class="mt-3">
        <div class="form-group">
          <a href="{%url 'uzivatel:update-uzivatel'%}" class="btn btn-secondary">{% trans "notifikaceProjekty.templates.pesList.backButton" %}</a>
        </div>
      </div>

{% endblock %}

{% block script %}
<script>
    //modal scripts
    document.addEventListener('DOMContentLoaded', function (event) {
      if (document.getElementsByClassName("pes-smazat-btn")){
        elements = document.getElementsByClassName("pes-smazat-btn")
        for (let i = 0; i < elements.length; i++){
          const options = Object.assign(Object.create(defaults), {modalID: "modal-form",
          formID: "smazat-pes-form",
          modalFormID: "#smazat-pes-form",
          })
          new Modal(options, elements.item(i).id);
        }
      }
  });
  </script>
{% endblock %}