{% extends 'base.html' %}
{% load static %}

{% block title %}Создание задания{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <div class="mb-6">
        <a href="{% url 'assignment_list' %}" class="text-indigo-600 hover:text-indigo-800">
            <i class="fas fa-arrow-left mr-2"></i>Назад к списку
        </a>
    </div>

    <div class="bg-white rounded-xl shadow-sm p-6">
        <h1 class="text-xl font-bold text-gray-800 mb-4">Создать задание</h1>

        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="space-y-4">

                {% if request.user.role == 'admin' or request.user.role == 'academic_staff' %}
                <div>
                    <label class="form-label">Преподаватель *</label>
                    <select name="teacher_id" required class="form-input">
                        <option value="">Выберите преподавателя</option>
                        {% for teacher in teachers %}
                        <option value="{{ teacher.id }}">{{ teacher.last_name }} {{ teacher.first_name }}</option>
                        {% endfor %}
                    </select>
                    <p class="text-xs text-gray-500 mt-1">Выберите преподавателя, который будет вести это задание</p>
                </div>
                {% endif %}

                <div>
                    <label class="form-label">Группы * (можно выбрать несколько)</label>
                    <select name="groups" multiple required class="form-input" size="5">
                        {% for group in groups %}
                        <option value="{{ group.id }}">{{ group.name }} (Курс {{ group.course_num }})</option>
                        {% endfor %}
                    </select>
                    <p class="text-xs text-gray-500 mt-1">Удерживайте Ctrl (Cmd на Mac) для выбора нескольких групп</p>
                </div>

                <div>
                    <label class="form-label">Предмет *</label>
                    <select name="subject" required class="form-input">
                        <option value="">Выберите предмет</option>
                        {% for subject in subjects %}
                        <option value="{{ subject.id }}">{{ subject.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div>
                    <label class="form-label">Название задания *</label>
                    <input type="text" name="title" required class="form-input" placeholder="Введите название">
                </div>

                <div>
                    <label class="form-label">Описание</label>
                    <textarea name="description" rows="4" class="form-textarea" placeholder="Опишите задание"></textarea>
                </div>

                <div>
                    <label class="form-label">Срок сдачи *</label>
                    <input type="date" name="deadline" required class="form-input">
                </div>

                <div class="border-t pt-4">
                    <h3 class="font-semibold text-gray-700 mb-3">Материалы к заданию (необязательно)</h3>

                    <div class="mb-3">
                        <label class="form-label">Файл материала</label>
                        <input type="file" name="material_file" class="form-input">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Ссылка на материал</label>
                        <input type="url" name="material_link" class="form-input" placeholder="https://...">
                    </div>

                    <div>
                        <label class="form-label">Текст материала</label>
                        <textarea name="material_text" rows="3" class="form-textarea" placeholder="Введите текст материала"></textarea>
                    </div>
                </div>

                <div class="flex gap-3 pt-4">
                    <button type="submit" class="btn-primary">Создать задание</button>
                    <a href="{% url 'assignment_list' %}" class="btn-secondary">Отмена</a>
                </div>
            </div>
        </form>
    </div>
</div>

<style>
    .form-label {
        display: block;
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: #374151;
    }
    .form-input, .form-textarea {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid #d1d5db;
        border-radius: 0.5rem;
    }
    .form-textarea {
        resize: vertical;
    }
    select[multiple] {
        min-height: 120px;
    }
    .btn-primary {
        background-color: #4395AB;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        text-decoration: none;
        display: inline-block;
        border: none;
        cursor: pointer;
    }
    .btn-primary:hover {
        background-color: #2d6b7c;
    }
    .btn-secondary {
        background-color: #6b7280;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        text-decoration: none;
        display: inline-block;
    }
    .btn-secondary:hover {
        background-color: #4b5563;
    }
</style>
{% endblock %}