{% extends "base.html" %}
{% block head %}
  {{ super() }}
<link
  rel="stylesheet"
  href="/assets/extensions/datatables.net-bs5/css/dataTables.bootstrap5.min.css"
/>

<link
  rel="stylesheet"
  href="/assets/compiled/css/table-datatable-jquery.css"
/>

<script src="/assets/extensions/jquery/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/bs5/dt-1.12.1/datatables.min.js"></script>
{% endblock %}
{% block content %}
<section class="section">
  <div class="card p-0">
    <div class="card-header">
      <div class="container m-0">
        <div class="row justify-content-between">
          <div class="col-auto">
            <div class="dropdown">
              <button
                class="btn dropdown-toggle me-1"
                type="button"
                id="dropdownMenuButton"
                data-bs-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                <span class="h3" id="planning-header">Jaarplanning {{ year }}</span>
              </button>
              <div
                class="dropdown-menu"
                aria-labelledby="dropdownMenuButton"
              >
              {% for year in Event.years.keys() %}
                <a class="dropdown-item" href="/annual-planning/{{ year }}">{{ year }}</a>
              {% endfor %}
              </div>
            </div>
          </div>
          <div class="col-auto pl-auto">
            <button
              type="button"
              class="btn rounded-pill btn-outline-primary"
              data-bs-toggle="modal"
              data-bs-target="#modal-add-event"
            >
              <i class="bi bi-plus-lg"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
    

    
    <div class="card-body">
      <div class="table-responsive">
        <table class="table" id="annual-planning-2023-2024">
          <thead>
            <tr>
              <th>Categorie</th>
              <th>Naam</th>
              <th>Status</th>
              <th>Organisator</th>
              <th>Locatie</th>
              <th>Begin</th>
              <th>Einde</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for event in Event.get_events(one_year=True, year=year) %}
              {{ event.render_table_row() | safe }}
            {% endfor %}
            <!--<tr>
              <td><span class="badge bg-light-danger">Intern</span></td>
              <td>Maandelijkse borrel september</td>
              <td><span class="badge bg-success">Definitief</span></td>
              <td>Bestuur 42</td>
              <td>De Keyzer</td>
              <td>2023-09-01 17:00</td>
              <td>2023-09-01 19:00</td>
              <td>
                <button
                  type="button"
                  class="btn rounded-pill btn-outline-primary"
                  data-bs-toggle="modal"
                  data-bs-target="#modal-add-event"
                >
                  <i class="bi bi-pencil"></i>
                </button>
              </td>
            </tr>
            <tr>
              <td><span class="badge bg-light-warning">Extern</span></td>
              <td>CoBo De Leidsche Flesch</td>
              <td><span class="badge bg-danger">Afgelast</span></td>
              <td>De Leidsche Flesch</td>
              <td>Foobar</td>
              <td>2023-09-03 19:00</td>
              <td>2023-09-03 21:00</td>
              <td>
                <button
                  type="button"
                  class="btn rounded-pill btn-outline-primary"
                  data-bs-toggle="modal"
                  data-bs-target="#modal-add-event"
                >
                  <i class="bi bi-pencil"></i>
                </button>
              </td>
            </tr>-->
            
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

<!--Event Add Modal -->
<div
class="modal fade text-left"
id="modal-add-event"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel1"
aria-hidden="true"
>
  <div
    class="modal-dialog modal-dialog-scrollable"
    role="document"
  >
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel1">
          Basic Modal
        </h5>
        <button
          type="button"
          class="close rounded-pill"
          data-bs-dismiss="modal"
          aria-label="Close"
        >
          <i data-feather="x"></i>
        </button>
      </div>
      <div class="modal-body">
        <p>
          Bonbon caramels muffin. Chocolate bar oat cake
          cookie pastry dragée pastry. Carrot cake chocolate
          tootsie roll chocolate bar candy canes biscuit.
          Gummies bonbon apple pie fruitcake icing biscuit
          apple pie jelly-o sweet roll. Toffee sugar plum
          sugar plum jelly-o jujubes bonbon dessert carrot
          cake. Cookie dessert tart muffin topping donut
          icing fruitcake. Sweet roll cotton candy dragée
          danish Candy canes chocolate bar cookie.
          Gingerbread apple pie oat cake. Carrot cake
          fruitcake bear claw. Pastry gummi bears
          marshmallow jelly-o.
        </p>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn"
          data-bs-dismiss="modal"
        >
          <i class="bx bx-x d-block d-sm-none"></i>
          <span class="d-none d-sm-block">Close</span>
        </button>
        <button
          type="button"
          class="btn btn-primary ms-1"
          data-bs-dismiss="modal"
        >
          <i class="bx bx-check d-block d-sm-none"></i>
          <span class="d-none d-sm-block">Accept</span>
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Event edit modals -->





<script>
  $(document).ready(function () {
    let jquery_datatable = $('#annual-planning-2023-2024').DataTable({
          "order": [[5, 'asc']],
          "pageLength": 100,
          "lengthMenu": [ 100, 250, 500 ],
          language: {
              url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/nl-NL.json',
          },
      });
  
    const setTableColor = () => {
      document.querySelectorAll('.dataTables_paginate .pagination').forEach(dt => {
          dt.classList.add('pagination-primary')
      })
    }
    setTableColor()
    jquery_datatable.on('draw', setTableColor)
  });
</script>
{% endblock %}