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

{% block title %}Учебные материалы{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-800">Учебные материалы</h1>
        <p class="text-gray-500">Лекции, методички, презентации и другие материалы</p>
    </div>

    <!-- Фильтр по типам -->
    <div class="flex flex-wrap gap-2 mb-6">
        <a href="?type=" class="px-4 py-2 rounded-lg {% if not current_type %}bg-[#4395AB] text-white{% else %}bg-gray-200 text-gray-700{% endif %} hover:bg-[#2d6b7c] hover:text-white transition">
            Все
        </a>
        {% for type_code, type_name in material_types %}
        <a href="?type={{ type_code }}" class="px-4 py-2 rounded-lg {% if current_type == type_code %}bg-[#4395AB] text-white{% else %}bg-gray-200 text-gray-700{% endif %} hover:bg-[#2d6b7c] hover:text-white transition">
            {{ type_name }}
        </a>
        {% endfor %}
    </div>

    <!-- Список материалов -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for material in materials %}
        <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition">
            <div class="p-5">
                <div class="flex items-center gap-2 mb-2">
                    <span class="text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-600">
                        {{ material.get_material_type_display }}
                    </span>
                    <span class="text-xs text-gray-400">{{ material.created_at|date:"d.m.Y" }}</span>
                </div>
                <h3 class="text-lg font-semibold text-gray-800 mb-2">
                    <a href="{% url 'material_detail' material.id %}" class="hover:text-[#4395AB]">
                        {{ material.title }}
                    </a>
                </h3>
                <p class="text-gray-600 text-sm line-clamp-3">{{ material.content|truncatechars:100 }}</p>
                <div class="mt-4 flex items-center justify-between">
                    <a href="{% url 'material_detail' material.id %}" class="text-[#4395AB] hover:text-[#2d6b7c] text-sm font-medium">
                        Читать далее →
                    </a>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-span-full text-center py-12 text-gray-500">
            <i class="fas fa-book-open text-4xl mb-3 block"></i>
            <p>Нет доступных материалов</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}