{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}
{% import "macros/workspace_ui.html" as ui %}

{% block extra_head %}
{% endblock %}

{% block page_title %}Holiday Calendar{% endblock %}

{% block admin_content %}
<section class="blocks-workspace mx-auto w-full max-w-6xl px-4 py-6 md:px-6" data-holiday-workspace aria-label="Organization holiday calendar">
<p class="blocks-workspace-help">
    Org-wide public holidays (all teams). For team- or designation-specific holidays used by
    Employee Attendance, use
    <a href="/plugins/employee-attendance/admin_holidays">Employee Attendance → Holidays</a>.
</p>
{{ ui::notice() }}

<div class="blocks-workspace-panel flex flex-wrap items-end gap-3">
    <div class="blocks-workspace-field">
    <label for="year-filter">Show holidays for</label>
    <select id="year-filter" class="blocks-control blocks-control--select blocks-control--filter-select">
        <option value="">All Years</option>
    </select>
    </div>
    <button type="button" id="refresh-holidays-btn" class="blocks-button blocks-button-secondary">Refresh list</button>
    <button type="button" id="export-pdf-btn" class="blocks-button blocks-button-secondary">
        <i class="fas fa-file-pdf"></i> Export to PDF
    </button>
    <button type="button" id="import-holidays-btn" class="blocks-button blocks-button-secondary" aria-expanded="false" aria-controls="holiday-import-panel">
        <i class="fas fa-file-import"></i> Import Public Holidays
    </button>
</div>

<section id="holiday-import-panel" class="blocks-workspace-panel" hidden aria-labelledby="holiday-import-title">
    <h2 id="holiday-import-title">Import public holidays</h2>
    <p class="blocks-workspace-help">Preview holidays before adding them. Imports use public country or region data; review names and dates for your organization.</p>
    <form data-holiday-import-form>
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            <div class="blocks-workspace-field"><label for="holiday-country">Country or region code</label><input id="holiday-country" name="country" placeholder="IN, IN-KA or US-NY" required maxlength="16" pattern="[A-Za-z]{2}(-[A-Za-z0-9]{1,8})?"></div>
            <div class="blocks-workspace-field"><label for="holiday-import-year">Year</label><input id="holiday-import-year" name="year" type="number" min="1900" max="2200" required></div>
            <button type="submit" class="blocks-button blocks-button-secondary">Preview holidays</button>
        </div>
    </form>
    <div data-import-preview hidden>
        <p data-import-summary role="status" aria-live="polite"></p>
        <div class="blocks-workspace-table" tabindex="0" role="region" aria-label="Holiday import preview"><table><thead><tr><th scope="col">Holiday</th><th scope="col">Date</th></tr></thead><tbody data-import-rows></tbody></table></div>
        <div class="blocks-workspace-actions"><button type="button" data-import-save class="blocks-button blocks-button-primary">Add these holidays</button><button type="button" data-import-cancel class="blocks-button blocks-button-secondary">Cancel preview</button></div>
    </div>
</section>

{{ crud::shell_open(config_url="/plugins/holiday-calendar/assets/admin/holidays_list.json", mount_id="holiday-calendar-list", custom_mount=true) }}

<div class="blocks-workspace-table" tabindex="0" role="region" aria-label="Holidays; scroll horizontally if needed">
    <table>
        <thead></thead>
        <tbody>
            <tr><td colspan="4" class="crud-empty-state text-center py-5 text-muted">Loading holidays…</td></tr>
        </tbody>
    </table>
</div>

{{ crud::shell_close() }}

<div id="holiday-modal" class="crud-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="modal-title">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="modal-title">Add Holiday</h2>
            <button type="button" class="close-modal" aria-label="Close">&times;</button>
        </div>
        <div class="modal-body">
            <div id="holiday-form-fields"></div>
        </div>
    </div>
</div>
</section>
{% endblock %}

{% block scripts %}
<div id="holiday-config" hidden
     data-currency-code="{{ settings.currency_code | default(value='USD') }}"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script>
<script src="/plugins/holiday-calendar/assets/js/holidays_list.js"></script>
<script src="/plugins/holiday-calendar/assets/js/holiday_calendar.js"></script>
{% endblock %}