{% load i18n %}
{% load static %}
{% load template_filters %}
<div class="card app-card-form app-card-{{card_type}} app-table-list-container">
    <div class="card-header">
      <div class="app-fx app-left">
        {{tableLabel}}
      </div>
      <div class="app-fx app-right">
        <div class="btn-group" role="group">
          {% if show.pripojit_eo %}
          <button class="btn" id="eo-pripojit-{{card_type}}" type="button" type="button" rel="tooltip" data-placement="top" title="{{pridatLabel}}" name="button" href="{% url 'ez:pripojit_eo' zaznam.ident_cely %}?type={{ card_type | urlencode }}">
            <span class="material-icons">add</span>
          </button>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="content-with-table-responsive-container">
      <div class="card-body content-with-table-responsive">
        {% if zaznamy %}
        <div class="loader" style="text-align:center;" >
          <img src="{% static "django_tables2_column_shifter/img/loader.gif" %}" style="margin:5px auto;" alt="loader"/>
          {% trans "templates.bootstrap4Table.loading"%}
        </div> 
        {% else %}
          <div class="app-note">
            <span class="material-icons">info</span>
            {{tabletext}}
          </div>
        {% endif %}
      </div>
    </div>
</div>
<script>
  //modal scripts
  document.addEventListener('DOMContentLoaded', function (event) {
      var options = Object.assign(Object.create(defaults), {modalID: "modal-form",
        formID: "pripojit-eo-form",
        modalFormID: "#pripojit-eo-form",
      })
      dokument_pripojit_modal = new Modal(options, "eo-pripojit-{{card_type}}");
});

</script>
<script type="text/javascript">
  // projekt pass load
  $(document).ready(function() {
    if ("{{show.ez_odkazy}}" != "False" && {{zaznamy.count}} > 0) {
      $.ajax({
        type: "GET",
        url: '{% url "ez:get_ez_odkazy_table" zaznam.ident_cely%}', 
        data: {
          'type': "{{type}}",
          'card_type': "{{card_type}}"
        },
        success : function(data) {
          $('.app-card-{{card_type}} .loader').css("display", "none");
          $('.app-card-{{card_type}} .content-with-table-responsive').append(data);
          if (document.getElementsByClassName("ez-odpojit-btn")){
            elements = document.getElementsByClassName("ez-odpojit-btn")
            for (let i = 0; i < elements.length; i++){
              var options = Object.assign(Object.create(defaults), {modalID: "modal-form",
              formID: "odpojit-az-form",
              modalFormID: "#odpojit-az-form",
              })
              new Modal(options, elements.item(i).id);
            }
          };
          if (document.getElementsByClassName("ez-change-btn")){
            elements = document.getElementsByClassName("ez-change-btn")
            for (let i = 0; i < elements.length; i++){
              var options = Object.assign(Object.create(defaults), {modalID: "modal-form",
              formID: "zmenit-eo-form",
              modalFormID: "#zmenit-eo-form",
              })
              new Modal(options, elements.item(i).id);
            }
          };
         }
});
    }
  }
  )
</script>