{# Sidebar offcanvas gauche pour afficher les tâches du jour #}
<div class="offcanvas offcanvas-start" tabindex="-1" id="tasksTodaySidebar" aria-labelledby="tasksTodaySidebarLabel" style="width:560px;">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="tasksTodaySidebarLabel">
        <i class="fas fa-list-check me-2"></i>Tâches
    </h5>
      <a href="{{ url_for('tasks.tasks_index') }}" class="btn btn-warning btn-sm"><i class="fas fa-cog me-1"></i></a>
      <a href="{{ url_for('tasks.email_drafts_list') }}" class="btn btn-success btn-sm"><i class="fa-solid fa-file-arrow-up"></i></a>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
  </div>
    <div class="offcanvas-body">
        <ul class="nav nav-tabs mb-3">
            <li class="nav-item">
                <a class="nav-link active" id="today-tab" data-bs-toggle="tab" href="#today">Aujourd'hui</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="tomorrow-tab" data-bs-toggle="tab" href="#tomorrow">Demain</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade show active" id="today">
                <div id="tasksTodayContent">
                    <div class="placeholder">Chargement des tâches...</div>
                </div>
            </div>
            <div class="tab-pane fade" id="tomorrow">
                <div id="tasksTomorrowContent">
                    <div class="placeholder">Chargement des tâches...</div>
                </div>
            </div>
        </div>
    </div>
    
</div>
<script>
(function(){
    const todayContainer = document.getElementById('tasksTodayContent');
    const tomorrowContainer = document.getElementById('tasksTomorrowContent');

    async function loadTasks(container, url) {
        try {
            const res = await fetch(url, {headers: {'X-Requested-With': 'XMLHttpRequest'}});
            if (!res.ok) throw new Error('HTTP ' + res.status);
            container.innerHTML = await res.text();
        } catch (e) {
            container.innerHTML = '<div class="text-muted">Impossible de charger les tâches.</div>';
        }
    }

    async function loadTodayTasks() {
        await loadTasks(todayContainer, '{{ url_for("tasks.today_fragment") }}');
    }

    async function loadTomorrowTasks() {
        await loadTasks(tomorrowContainer, '{{ url_for("tasks.tomorrow_fragment") }}');
    }

    // Charger au premier affichage de la page
    document.addEventListener('DOMContentLoaded', loadTodayTasks);

    // Recharger à l'ouverture de l'offcanvas
    const sidebar = document.getElementById('tasksTodaySidebar');
    if (sidebar) {
        sidebar.addEventListener('show.bs.offcanvas', () => {
            loadTodayTasks();
            loadTomorrowTasks();
        });
    }

    // Gérer les changements d'onglets
    const tomorrowTab = document.getElementById('tomorrow-tab');
    tomorrowTab.addEventListener('shown.bs.tab', loadTomorrowTasks);
})();
</script>