{% extends "base.html" %}

{% block title %}AuraToolKit 360 - Employee Leave & Shift Calendar{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold text-dark mb-1">📅 Interactive Employee Leave & Shift Calendar</h2>
            <p class="text-muted small">View upcoming company holidays, approved employee time-offs, and shift schedules for <strong>{{ current_company }}</strong>.</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-primary rounded-pill px-3" onclick="alert('Leave Request Modal')">
                <i class="bi bi-plus-circle me-1"></i> Apply New Leave
            </button>
        </div>
    </div>

    <!-- Month Navigation Header -->
    <div class="card border-0 shadow-sm rounded-4 p-3 mb-4 bg-white">
        <div class="d-flex justify-content-between align-items-center">
            <h4 class="fw-bold mb-0 text-dark">August 2026</h4>
            <div class="d-flex gap-3 align-items-center">
                <span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25 px-3 py-2 rounded-pill">🌴 Approved Leave</span>
                <span class="badge bg-warning bg-opacity-10 text-dark border border-warning border-opacity-25 px-3 py-2 rounded-pill">⏳ Pending Approval</span>
                <span class="badge bg-info bg-opacity-10 text-info border border-info border-opacity-25 px-3 py-2 rounded-pill">🎉 Public Holiday</span>
            </div>
        </div>
    </div>

    <!-- Calendar Grid -->
    <div class="card border-0 shadow-sm rounded-4 p-4 bg-white">
        <div class="table-responsive">
            <table class="table table-bordered align-middle mb-0" style="min-width: 800px; table-layout: fixed;">
                <thead class="table-dark text-center">
                    <tr>
                        <th style="width: 14.28%;">Sun</th>
                        <th style="width: 14.28%;">Mon</th>
                        <th style="width: 14.28%;">Tue</th>
                        <th style="width: 14.28%;">Wed</th>
                        <th style="width: 14.28%;">Thu</th>
                        <th style="width: 14.28%;">Fri</th>
                        <th style="width: 14.28%;">Sat</th>
                    </tr>
                </thead>
                <tbody style="height: 450px;">
                    <tr>
                        <td class="bg-light text-muted p-2 text-end">26</td>
                        <td class="bg-light text-muted p-2 text-end">27</td>
                        <td class="bg-light text-muted p-2 text-end">28</td>
                        <td class="bg-light text-muted p-2 text-end">29</td>
                        <td class="bg-light text-muted p-2 text-end">30</td>
                        <td class="bg-light text-muted p-2 text-end">31</td>
                        <td class="p-2 align-top">
                            <span class="fw-bold">1</span>
                            <div class="mt-1"><span class="badge bg-secondary w-100 text-start text-truncate">Weekend Off</span></div>
                        </td>
                    </tr>
                    <tr>
                        <td class="p-2 align-top"><span class="fw-bold">2</span></td>
                        <td class="p-2 align-top"><span class="fw-bold">3</span></td>
                        <td class="p-2 align-top"><span class="fw-bold">4</span></td>
                        <td class="p-2 align-top">
                            <span class="fw-bold">5</span>
                            <div class="mt-1"><span class="badge bg-success w-100 text-start text-truncate">🌴 Sarah (Medical)</span></div>
                        </td>
                        <td class="p-2 align-top"><span class="fw-bold">6</span></td>
                        <td class="p-2 align-top"><span class="fw-bold">7</span></td>
                        <td class="p-2 align-top">
                            <span class="fw-bold">8</span>
                            <div class="mt-1"><span class="badge bg-secondary w-100 text-start text-truncate">Weekend Off</span></div>
                        </td>
                    </tr>
                    <tr>
                        <td class="p-2 align-top"><span class="fw-bold">9</span></td>
                        <td class="p-2 align-top"><span class="fw-bold">10</span></td>
                        <td class="p-2 align-top"><span class="fw-bold">11</span></td>
                        <td class="p-2 align-top bg-primary bg-opacity-10 border border-primary">
                            <span class="fw-bold text-primary">12 Today</span>
                            <div class="mt-1"><span class="badge bg-warning text-dark w-100 text-start text-truncate">⏳ Ali (Casual)</span></div>
                        </td>
                        <td class="p-2 align-top"><span class="fw-bold">13</span></td>
                        <td class="p-2 align-top bg-info bg-opacity-10">
                            <span class="fw-bold text-info">14</span>
                            <div class="mt-1"><span class="badge bg-info text-dark w-100 text-start text-truncate">🎉 Independence Day</span></div>
                        </td>
                        <td class="p-2 align-top">
                            <span class="fw-bold">15</span>
                            <div class="mt-1"><span class="badge bg-secondary w-100 text-start text-truncate">Weekend Off</span></div>
                        </td>
                    </tr>
                    <tr>
                        <td class="p-2 align-top"><span class="fw-bold">16</span></td>
                        <td class="p-2 align-top"><span class="fw-bold">17</span></td>
                        <td class="p-2 align-top"><span class="fw-bold">18</span></td>
                        <td class="p-2 align-top"><span class="fw-bold">19</span></td>
                        <td class="p-2 align-top"><span class="fw-bold">20</span></td>
                        <td class="p-2 align-top"><span class="fw-bold">21</span></td>
                        <td class="p-2 align-top">
                            <span class="fw-bold">22</span>
                            <div class="mt-1"><span class="badge bg-secondary w-100 text-start text-truncate">Weekend Off</span></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}