{% extends "base.html" %}

{% block title %}Create Template - {{ config.APP_NAME }}{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8 max-w-2xl">
    <!-- Header -->
    <div class="mb-6">
        <a href="{{ url_for('time_entry_templates.list_templates') }}" 
           class="text-blue-600 hover:text-blue-800 dark:text-blue-400 mb-4 inline-block">
            <i class="fas fa-arrow-left mr-2"></i> Back to Templates
        </a>
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ _('Create Time Entry Template') }}</h1>
        <p class="text-gray-600 dark:text-gray-400 mt-2">Set up a reusable template for quick time tracking</p>
    </div>

    <!-- Form -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <form method="POST" action="{{ url_for('time_entry_templates.create_template') }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            
            <!-- Template Name -->
            <div class="mb-6">
                <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Template Name <span class="text-red-500">*</span>
                </label>
                <input type="text" 
                       id="name" 
                       name="name" 
                       value="{{ form_data.name if form_data else '' }}"
                       required 
                       class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
                       placeholder="{{ _('e.g., Daily Standup, Client Meeting') }}">
            </div>

            <!-- Project -->
            <div class="mb-6">
                <label for="project_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Project
                </label>
                <select id="project_id" 
                        name="project_id" 
                        onchange="loadProjectTasks(this.value)"
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
                    <option value="">Select a project (optional)</option>
                    {% for project in projects %}
                    <option value="{{ project.id }}" 
                            {% if form_data and form_data.project_id|int == project.id %}selected{% endif %}>
                        {{ project.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>

            <!-- Task -->
            <div class="mb-6">
                <label for="task_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Task
                </label>
                <select id="task_id" 
                        name="task_id" 
                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
                    <option value="">Select a task (optional)</option>
                </select>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                    Select a project first to load tasks
                </p>
            </div>

            <!-- Default Duration -->
            <div class="mb-6">
                <label for="default_duration" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Default Duration (hours)
                </label>
                <input type="number" 
                       id="default_duration" 
                       name="default_duration" 
                       value="{{ form_data.default_duration if form_data else '' }}"
                       step="0.25" 
                       min="0"
                       class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
                       placeholder="{{ _('e.g., 1.0, 0.5') }}">
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                    Leave empty for manual timer start/stop
                </p>
            </div>

            <!-- Default Notes -->
            <div class="mb-6">
                <label for="default_notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Default Notes
                </label>
                <textarea id="default_notes" 
                          name="default_notes" 
                          rows="3"
                          class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
                          placeholder="{{ _('Pre-fill notes for this type of time entry') }}">{{ form_data.default_notes if form_data else '' }}</textarea>
            </div>

            <!-- Tags -->
            <div class="mb-6">
                <label for="tags" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Tags
                </label>
                <input type="text" 
                       id="tags" 
                       name="tags" 
                       value="{{ form_data.tags if form_data else '' }}"
                       class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
                       placeholder="{{ _('e.g., meeting, development, admin') }}">
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                    Comma-separated tags
                </p>
            </div>

            <!-- Actions -->
            <div class="flex justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700">
                <a href="{{ url_for('time_entry_templates.list_templates') }}" 
                   class="btn btn-secondary">
                    Cancel
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save mr-2"></i> Create Template
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function loadProjectTasks(projectId) {
    const taskSelect = document.getElementById('task_id');
    
    // Clear existing options
    taskSelect.innerHTML = '<option value="">Select a task (optional)</option>';
    
    if (!projectId) {
        return;
    }
    
    // Fetch tasks for the selected project
    fetch(`/api/projects/${projectId}/tasks`)
        .then(response => response.json())
        .then(data => {
            data.tasks.forEach(task => {
                const option = document.createElement('option');
                option.value = task.id;
                option.textContent = task.name;
                taskSelect.appendChild(option);
            });
        })
        .catch(error => {
            console.error('Error loading tasks:', error);
        });
}

// Load tasks if project is pre-selected
document.addEventListener('DOMContentLoaded', function() {
    const projectSelect = document.getElementById('project_id');
    if (projectSelect.value) {
        loadProjectTasks(projectSelect.value);
    }
});
</script>
{% endblock %}