{% extends "base.html" %}
{% from "components/ui.html" import page_header, breadcrumb_nav, button, filter_badge %}

{% block title %}Calendar - {{ app_name }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='calendar.css') }}?v=2">
{% endblock %}

{% block content %}
{% set breadcrumbs = [
    {'text': _('Calendar')}
] %}

{{ page_header(
    icon_class='fas fa-calendar-alt',
    title_text=_('Calendar'),
    subtitle_text=_('View and manage your events, tasks, and time entries'),
    breadcrumbs=breadcrumbs,
    actions_html=None
) }}

<div class="bg-card-light dark:bg-card-dark rounded-lg shadow-sm p-6 mb-6">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
        <div class="flex flex-wrap gap-3">
                <!-- View Type Selector -->
                <div class="btn-group" role="group">
                    <a href="{{ url_for('calendar.view_calendar', view='day', date=current_date.strftime('%Y-%m-%d')) }}" 
                       data-view="day"
                       class="btn btn-sm {% if view_type == 'day' %}btn-primary{% else %}btn-secondary{% endif %}">
                        <i class="fas fa-calendar-day mr-1"></i> {{ _('Day') }}
                    </a>
                    <a href="{{ url_for('calendar.view_calendar', view='week', date=current_date.strftime('%Y-%m-%d')) }}" 
                       data-view="week"
                       class="btn btn-sm {% if view_type == 'week' %}btn-primary{% else %}btn-secondary{% endif %}">
                        <i class="fas fa-calendar-week mr-1"></i> {{ _('Week') }}
                    </a>
                    <a href="{{ url_for('calendar.view_calendar', view='month', date=current_date.strftime('%Y-%m-%d')) }}" 
                       data-view="month"
                       class="btn btn-sm {% if view_type == 'month' %}btn-primary{% else %}btn-secondary{% endif %}">
                        <i class="fas fa-calendar mr-1"></i> {{ _('Month') }}
                    </a>
                </div>
                
                <!-- Add Event Button -->
                <a href="{{ url_for('calendar.new_event', date=current_date.strftime('%Y-%m-%d')) }}" 
                   class="btn btn-primary btn-sm">
                    <i class="fas fa-plus mr-2"></i>
                    {{ _('New Event') }}
                </a>
            </div>
        </div>
        
        <!-- Calendar Navigation -->
        <div class="flex items-center justify-between mt-6">
            <button id="prevBtn" class="btn btn-sm btn-secondary">
                <i class="fas fa-chevron-left"></i>
            </button>
            
            <div class="flex items-center gap-4">
                <button id="todayBtn" class="btn btn-sm btn-secondary">
                    {{ _('Today') }}
                </button>
                <h2 id="calendarTitle" class="text-2xl font-semibold"></h2>
            </div>
            
            <button id="nextBtn" class="btn btn-sm btn-secondary">
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>
        
        <!-- Filters -->
        <div class="flex flex-wrap gap-3 mt-4">
            <label class="inline-flex items-center">
                <input type="checkbox" id="showEvents" checked class="form-checkbox">
                <span class="ml-2">{{ _('Events') }}</span>
            </label>
            <label class="inline-flex items-center">
                <input type="checkbox" id="showTasks" checked class="form-checkbox">
                <span class="ml-2">{{ _('Tasks') }}</span>
            </label>
            <label class="inline-flex items-center">
                <input type="checkbox" id="showTimeEntries" checked class="form-checkbox">
                <span class="ml-2">{{ _('Time Entries') }}</span>
            </label>
        </div>

        <!-- Calendar colors -->
        <div class="flex flex-wrap items-center gap-4 mt-4 pt-4 border-t border-border-light dark:border-border-dark">
            <span class="text-sm font-medium text-text-light dark:text-text-dark">{{ _('Calendar colors') }}</span>
            <div class="flex flex-wrap items-center gap-4">
                <label class="inline-flex items-center gap-2">
                    <span class="text-sm">{{ _('Events') }}</span>
                    <input type="color" id="calendarColorEvents" value="{{ type_colors.event }}" class="h-8 w-12 cursor-pointer rounded border border-border-light dark:border-border-dark" title="{{ _('Events') }}">
                </label>
                <label class="inline-flex items-center gap-2">
                    <span class="text-sm">{{ _('Tasks') }}</span>
                    <input type="color" id="calendarColorTasks" value="{{ type_colors.task }}" class="h-8 w-12 cursor-pointer rounded border border-border-light dark:border-border-dark" title="{{ _('Tasks') }}">
                </label>
                <label class="inline-flex items-center gap-2">
                    <span class="text-sm">{{ _('Time Entries') }}</span>
                    <input type="color" id="calendarColorTimeEntries" value="{{ type_colors.time_entry }}" class="h-8 w-12 cursor-pointer rounded border border-border-light dark:border-border-dark" title="{{ _('Time Entries') }}">
                </label>
            </div>
            <div class="flex items-center gap-2">
                <span class="text-xs text-muted">{{ _('Legend') }}:</span>
                <span class="inline-flex items-center gap-1"><span class="inline-block w-3 h-3 rounded-full" style="background-color: {{ type_colors.event }}"></span> {{ _('Events') }}</span>
                <span class="inline-flex items-center gap-1"><span class="inline-block w-3 h-3 rounded-full" style="background-color: {{ type_colors.task }}"></span> {{ _('Tasks') }}</span>
                <span class="inline-flex items-center gap-1"><span class="inline-block w-3 h-3 rounded-full" style="background-color: {{ type_colors.time_entry }}"></span> {{ _('Time Entries') }}</span>
            </div>
            <button type="button" id="saveCalendarColorsBtn" class="btn btn-sm btn-primary">
                <i class="fas fa-save mr-1"></i>{{ _('Save') }}
            </button>
        </div>
    </div>
    
    <!-- Calendar Grid -->
    <div class="bg-card-light dark:bg-card-dark rounded-lg shadow-sm p-6">
        <div id="calendarContainer" class="calendar-container">
            <!-- Calendar will be rendered here by JavaScript -->
            <div class="text-center py-12">
                <i class="fas fa-spinner fa-spin text-4xl text-primary mb-4"></i>
                <p class="text-muted">{{ _('Loading calendar...') }}</p>
            </div>
        </div>
    </div>
    
    <!-- Event Details Modal -->
    <div id="eventModal" class="modal" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">{{ _('Event Details') }}</h3>
                    <div class="modal-header-actions">
                        <a href="#" id="eventModalGoToBtn" class="btn btn-primary btn-sm" style="display: none;">
                            <i class="fas fa-external-link-alt me-1"></i>{{ _('Go to all details') }}
                        </a>
                        <button type="button" class="close" data-dismiss="modal">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="modal-body" id="eventDetails">
                    <!-- Event details will be loaded here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        {{ _('Close') }}
                    </button>
                    <a id="editEventBtn" href="#" class="btn btn-primary">
                        <i class="fas fa-edit mr-2"></i>{{ _('Edit') }}
                    </a>
                    <button id="deleteEventBtn" type="button" class="btn btn-danger">
                        <i class="fas fa-trash mr-2"></i>{{ _('Delete') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

<!-- Pass data to JavaScript -->
<script>
    window.calendarData = {
        viewType: '{{ view_type }}',
        currentDate: '{{ current_date.strftime('%Y-%m-%d') }}',
        apiUrl: '{{ url_for('calendar.get_events') }}',
        viewUrl: '{{ url_for('calendar.view_calendar') }}',
        newEventUrl: '{{ url_for('calendar.new_event') }}',
        editEventUrl: '{{ url_for('calendar.edit_event', event_id=0) }}'.replace('/0', ''),
        deleteEventUrl: '{{ url_for('calendar.delete_event', event_id=0) }}'.replace('/0', ''),
        moveEventUrl: '{{ url_for('calendar.move_event', event_id=0) }}'.replace('/0', ''),
        resizeEventUrl: '{{ url_for('calendar.resize_event', event_id=0) }}'.replace('/0', ''),
        csrfToken: '{{ csrf_token() }}',
        typeColors: {
            event: '{{ type_colors.event }}',
            task: '{{ type_colors.task }}',
            time_entry: '{{ type_colors.time_entry }}'
        },
        preferencesUrl: '{{ url_for('user.update_preferences') }}'
    };
</script>
{% endblock %}

{% block scripts_extra %}
<script src="{{ url_for('static', filename='calendar.js') }}?v=9"></script>
{% endblock %}

