{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block styles %}
{% endblock %}

{% block scripts %}
    <script>

    </script>
{% endblock %}
{% block content %}
    <div class="row">

        <div class="modal fade" id="newPublicHolidayModal" tabindex="-1" role="dialog"
             aria-labelledby="depositModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="depositModalLabel">New Public Holiday</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>

                    <form method="post" id="newPublicHolidayForm">
                        {% csrf_token %}
                        <div class="modal-body">
                            <div class="form-group w-100">
                                <label class="form-label col w-100" for="name">
                                    Name
                                    <input type="text" class="form-control"
                                           name="name"
                                           required/>
                                </label>
                            </div>

                            <div class="form-group w-100 row">
                                <label class="form-label col" for="day">
                                    Day
                                    <select name="day" id="day" class="form-select" required>
                                        <option selected disabled value="">Select...</option>
                                        {% for i in ""|rjust:"31" %}
                                            <option value="{{ forloop.counter }}">{{ forloop.counter }}</option>
                                        {% endfor %}
                                    </select>
                                </label>

                                <label class="form-label col" for="date">
                                    Month
                                    <select name="month" id="month" class="form-select" required>
                                        <option selected disabled value="">Select...</option>
                                        {% for i in ""|rjust:"12" %}
                                            {% with month_number=forloop.counter %}
                                                <option value="{{ month_number }}">
                                                    {% if month_number == 1 %}January
                                                    {% elif month_number == 2 %}February
                                                    {% elif month_number == 3 %}March
                                                    {% elif month_number == 4 %}April
                                                    {% elif month_number == 5 %}May
                                                    {% elif month_number == 6 %}June
                                                    {% elif month_number == 7 %}July
                                                    {% elif month_number == 8 %}August
                                                    {% elif month_number == 9 %}September
                                                    {% elif month_number == 10 %}October
                                                    {% elif month_number == 11 %}November
                                                    {% elif month_number == 12 %}December
                                                    {% endif %}
                                                </option>
                                            {% endwith %}
                                        {% endfor %}
                                    </select>
                                </label>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Close
                            </button>
                            <button class="btn btn-sm btn-outline-primary" type="submit">
                                Submit
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>


        <!-- Start col -->
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col">
                                    <h1 class="h2">{{ title }}</h1>
                                </div>

                                <div class="col text-end">
                                    <div class="text-muted">
                                        Showing
                                        {{ public_holidays.start_index|intcomma }}
                                        to
                                        {{ public_holidays.end_index|intcomma }}
                                        of
                                        {{ public_holidays.paginator.count|intcomma }}
                                        total results
                                    </div>

                                    <button class="btn btn-sm btn-outline-primary mt-2"
                                            data-bs-target="#newPublicHolidayModal"
                                            data-bs-toggle="modal">
                                        New Holiday
                                    </button>

                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-sm table-bordered table-hover">
                                    <thead class="thead-light">
                                    <tr>
                                        <th>Name</th>
                                        <th class="text-right">Date</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for public_holiday in public_holidays %}
                                        <tr>
                                            <td>{{ public_holiday.name }}</td>
                                            <td class="text-right">{{ public_holiday.month_str }} {{ public_holiday.day }}
                                                {% if public_holiday.day == 1 %}
                                                    st
                                                {% elif public_holiday.day == 2 %}
                                                    nd
                                                {% elif public_holiday.day == 3 %}
                                                    rd
                                                {% else %}
                                                    th
                                                {% endif %}
                                            </td>
                                            <td>
                                                <form action="{% url 'public_holiday' public_holiday.id %}"
                                                      method="post">
                                                    {% csrf_token %}
                                                    <button class="btn btn-sm btn-outline-danger" type="submit">Delete
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    {% empty %}
                                        <tr>
                                            <td colspan="2" class="text-center">No Public Holidays</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>

                                </table>
                            </div>

                            {% if public_holidays.has_other_pages %}
                                <div class="row mt-3">
                                    <div class="col-md-6">
                                        <nav aria-label="Page navigation">
                                            <ul class="pagination mb-0">
                                                {% if public_holidays.has_previous %}
                                                    <li class="page-item">
                                                        <a class="page-link"
                                                           href="?page={{ public_holidays.previous_page_number }}"
                                                           aria-label="Previous">
                                                            <span aria-hidden="true">&laquo;</span>
                                                        </a>
                                                    </li>
                                                {% else %}
                                                    <li class="page-item disabled">
                                                        <span class="page-link" aria-hidden="true">&laquo;</span>
                                                    </li>
                                                {% endif %}

                                                {% for num in public_holidays.paginator.page_range %}
                                                    {% if public_holidays.number == num %}
                                                        <li class="page-item active">
                                            <span class="page-link">
                                                {{ num }}
                                                <span class="sr-only">(current)</span>
                                            </span>
                                                        </li>
                                                    {% elif num > public_holidays.number|add:'-3' and num < public_holidays.number|add:'3' %}
                                                        <li class="page-item">
                                                            <a class="page-link"
                                                               href="?page={{ num }}">{{ num }}</a>
                                                        </li>
                                                    {% endif %}
                                                {% endfor %}

                                                {% if public_holidays.has_next %}
                                                    <li class="page-item">
                                                        <a class="page-link"
                                                           href="?page={{ public_holidays.next_page_number }}"
                                                           aria-label="Next">
                                                            <span aria-hidden="true">&raquo;</span>
                                                        </a>
                                                    </li>
                                                {% else %}
                                                    <li class="page-item disabled">
                                                        <span class="page-link" aria-hidden="true">&raquo;</span>
                                                    </li>
                                                {% endif %}
                                            </ul>
                                        </nav>
                                    </div>
                                    <div class="col-md-6 text-md-right mt-3 mt-md-0">
                                        <p class="text-muted mb-0">
                                            Page {{ public_holidays.number }}
                                            of {{ public_holidays.paginator.num_pages }}
                                        </p>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End col -->

    </div>
{% endblock %}