<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Linear Calendar</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- FullCalendar CSS - more specific imports -->
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css' rel='stylesheet' />
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.css' rel='stylesheet' />
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/fullscreen.css') }}">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
</head>
<body>
    <div class="container-fluid p-0">
        <header class="py-2 border-bottom mb-0 px-2">
            <div class="row g-2 align-items-center">
                <div class="col-md-2 col-sm-12">
                    <h1 class="logo h5 mb-0">Linear Calendar</h1>
                </div>
                <div class="col-md-8 col-sm-12">
                    <div class="row g-2">
                        <div class="col-md-3 col-6">
                            <select id="team-filter" class="form-select form-select-sm">
                                <option value="all">All Teams</option>
                                <!-- Teams will be populated dynamically -->
                            </select>
                        </div>
                        <div class="col-md-3 col-6">
                            <select id="project-filter" class="form-select form-select-sm" multiple>
                                <!-- Projects will be populated dynamically -->
                            </select>
                        </div>
                        <div class="col-md-3 col-6">
                            <select id="state-filter" class="form-select form-select-sm">
                                <option value="all">All States</option>
                                <!-- States will be populated dynamically -->
                            </select>
                        </div>
                        <div class="col-md-3 col-6 d-flex align-items-center">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="no-due-date-toggle">
                                <label class="form-check-label" for="no-due-date-toggle">Show No Due Date Issues</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 col-sm-12 text-end">
                    <div class="d-flex align-items-center justify-content-end gap-3">
                        <button id="theme-toggle" class="btn btn-sm btn-outline-secondary" title="Toggle Dark Mode">
                            <i class="bi bi-moon-fill" id="dark-icon"></i>
                            <i class="bi bi-sun-fill d-none" id="light-icon"></i>
                        </button>
                        <div id="loading" class="loading hidden d-inline-flex align-items-center">
                            <div class="spinner-border spinner-border-sm text-primary me-2" role="status"></div>
                            <span>Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        
        <main class="vh-100 overflow-hidden">
            <div class="row g-0 h-100">
                <div class="col-12">
                    <div class="calendar-container h-100">
                        <div id="calendar" class="h-100"></div>
                        <div id="no-due-date-list" class="h-100 d-none"></div>
                    </div>
                </div>
            </div>
        </main>
        
        <!-- Bootstrap Offcanvas Sidebar -->        
        <div class="offcanvas offcanvas-end" tabindex="-1" id="issueDetailsOffcanvas" aria-labelledby="issueDetailsLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="issue-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <div class="issue-meta mb-3">
                    <div class="issue-team badge bg-primary mb-1" id="issue-team"></div>
                    <div class="issue-state badge mb-1" id="issue-state"></div>
                    <div class="issue-assignee badge bg-light text-dark mb-1" id="issue-assignee"></div>
                </div>
                <div class="issue-labels mb-3" id="issue-labels"></div>
                <div class="issue-description p-3 rounded" id="issue-description"></div>
                <div class="mt-4">
                    <a id="view-in-linear" href="#" target="_blank" class="btn btn-sm btn-primary">
                        <i class="bi bi-box-arrow-up-right me-1"></i>View in Linear
                    </a>
                </div>
            </div>
        </div>
        
        <div id="loading-overlay" class="hidden position-fixed top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center" style="background-color: rgba(255,255,255,0.8); z-index: 1050;">
            <div class="text-center p-4 bg-white rounded shadow">
                <div class="spinner-border text-primary mb-3" role="status" style="width: 3rem; height: 3rem;"></div>
                <p class="mb-0 fw-medium">Loading Linear issues...</p>
            </div>
        </div>
        
        <div id="error-message" class="hidden position-fixed top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center" style="background-color: rgba(0,0,0,0.5); z-index: 1060;">
            <div class="error-content bg-white p-4 rounded shadow-lg" style="max-width: 400px;">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h3 class="mb-0 text-danger"><i class="bi bi-exclamation-triangle-fill me-2"></i>Error</h3>
                    <button id="close-error" class="btn-close" aria-label="Close"></button>
                </div>
                <p id="error-text" class="border-top border-bottom py-3"></p>
                <div class="text-end">
                    <button class="btn btn-outline-secondary btn-sm" id="close-error-btn">Close</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- FullCalendar with all required packages -->
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales-all.min.js'></script>
    <!-- Main calendar script -->
    <script src="{{ url_for('static', filename='js/calendar.js') }}"></script>
</body>
</html>
