{% extends "base.html" %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="container mx-auto px-4 py-8 max-w-[95%]">
        <!-- Header Section -->
        <div class="flex flex-col md:flex-row items-center justify-between mb-8 gap-4">
            <h1 class="text-3xl font-bold text-[#e74c3c]">Template Files</h1>
            <div class="flex items-center gap-4">
                <span class="text-lg font-medium text-gray-600">
                    {{ total_templates }} template
                    {% if total_templates != 1 %}s{% endif %}
                </span>
                <!-- Search Box -->
                <form method="get" class="flex items-center gap-2">
                    <input type="text"
                           name="search"
                           value="{{ search_query }}"
                           placeholder="Search templates..."
                           class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#e74c3c]">
                    <!-- Filter Dropdown -->
                    <select name="filter"
                            class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#e74c3c]">
                        {% for option in filter_options %}
                            <option value="{{ option.value }}"
                                    {% if filter_by == option.value %}selected{% endif %}>{{ option.label }}</option>
                        {% endfor %}
                    </select>
                    <button type="submit"
                            class="px-4 py-2 bg-[#e74c3c] text-white rounded-lg hover:bg-[#c0392b] transition-colors">
                        <i class="fas fa-search"></i>
                    </button>
                </form>
            </div>
        </div>
        <!-- Templates Table -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden border border-gray-200">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col"
                                class="w-1/5 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                <a href="?sort=name{% if sort == 'name' and direction != 'desc' %}&dir=desc{% endif %}&search={{ search_query }}&filter={{ filter_by }}"
                                   class="flex items-center hover:text-[#e74c3c]">
                                    Template
                                    {% if sort == 'name' %}<i class="fas fa-sort-{{ direction }}" aria-hidden="true"></i>{% endif %}
                                </a>
                            </th>
                            <th scope="col"
                                class="w-1/4 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                <a href="?sort=path{% if sort == 'path' and direction != 'desc' %}&dir=desc{% endif %}&search={{ search_query }}&filter={{ filter_by }}"
                                   class="flex items-center hover:text-[#e74c3c]">
                                    Path
                                    {% if sort == 'path' %}<i class="fas fa-sort-{{ direction }}" aria-hidden="true"></i>{% endif %}
                                </a>
                            </th>
                            <th scope="col"
                                class="w-1/4 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                URL
                            </th>
                            <th scope="col"
                                class="w-1/6 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                <a href="?sort=modified{% if sort == 'modified' and direction != 'desc' %}&dir=desc{% endif %}&search={{ search_query }}&filter={{ filter_by }}"
                                   class="flex items-center hover:text-[#e74c3c]">
                                    Last Modified
                                    {% if sort == 'modified' %}<i class="fas fa-sort-{{ direction }}" aria-hidden="true"></i>{% endif %}
                                </a>
                            </th>
                            <th scope="col"
                                class="w-20 px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                <a href="?sort=views{% if sort == 'views' and direction != 'desc' %}&dir=desc{% endif %}&search={{ search_query }}&filter={{ filter_by }}"
                                   class="flex items-center justify-center hover:text-[#e74c3c]">
                                    Views
                                    {% if sort == 'views' %}<i class="fas fa-sort-{{ direction }}" aria-hidden="true"></i>{% endif %}
                                </a>
                            </th>
                            <th scope="col"
                                class="w-32 px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Status
                            </th>
                            <th scope="col"
                                class="w-32 px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Actions
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for dir_name, template in page_obj %}
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4">
                                    <div class="flex items-center">
                                        <span class="text-sm font-medium text-gray-900">{{ template.name }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <span class="text-sm text-gray-500 hover:whitespace-normal truncate block">{{ template.path|cut:base_dir }}</span>
                                </td>
                                <td class="px-6 py-4">
                                    {% if template.url %}
                                        <a href="{{ template.url }}"
                                           class="text-sm text-[#e74c3c] hover:text-[#c0392b]">{{ template.url }}</a>
                                    {% else %}
                                        <span class="text-sm text-gray-400 italic">No matching URL</span>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4">
                                    <span class="text-sm text-gray-500">{{ template.modified|date:"Y-m-d H:i" }}</span>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <span class="text-sm text-gray-500">{{ template.views|default:0 }}</span>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex flex-col items-center gap-1">
                                        {% if template.has_sidenav %}
                                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
                                                <i class="fas fa-check-circle mr-1"></i>
                                                Sidenav
                                            </span>
                                        {% endif %}
                                        {% if template.extends_base %}
                                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
                                                <i class="fas fa-code mr-1"></i>
                                                Base
                                            </span>
                                        {% endif %}
                                        {% if template.has_style_tags %}
                                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
                                                <i class="fas fa-paint-brush mr-1"></i>
                                                Styles
                                            </span>
                                        {% endif %}
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <a href="{{ template.github_url }}"
                                       target="_blank"
                                       class="text-[#e74c3c] hover:text-[#c0392b] inline-flex items-center justify-center">
                                        <i class="fab fa-github mr-1"></i>
                                        View
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        <!-- Pagination -->
        {% if page_obj.paginator.num_pages > 1 %}
            <div class="flex justify-center mt-8">
                <nav class="inline-flex rounded-md shadow-sm -space-x-px"
                     aria-label="Pagination">
                    {% if page_obj.has_previous %}
                        <a href="?page={{ page_obj.previous_page_number }}&search={{ search_query }}&filter={{ filter_by }}&sort={{ sort }}&dir={{ direction }}"
                           class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <i class="fas fa-chevron-left"></i>
                        </a>
                    {% endif %}
                    {% for num in page_obj.paginator.page_range %}
                        {% if num == page_obj.number %}
                            <span class="relative inline-flex items-center px-4 py-2 border border-[#e74c3c] bg-[#e74c3c] text-sm font-medium text-white">
                                {{ num }}
                            </span>
                        {% else %}
                            <a href="?page={{ num }}&search={{ search_query }}&filter={{ filter_by }}&sort={{ sort }}&dir={{ direction }}"
                               class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                {{ num }}
                            </a>
                        {% endif %}
                    {% endfor %}
                    {% if page_obj.has_next %}
                        <a href="?page={{ page_obj.next_page_number }}&search={{ search_query }}&filter={{ filter_by }}&sort={{ sort }}&dir={{ direction }}"
                           class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    {% endif %}
                </nav>
            </div>
        {% endif %}
    </div>
{% endblock %}