{% extends "base/base.html" %}
{% load static %}

{% block title %}Manufacturers - ThrillWiki{% endblock %}

{% block content %}
<div class="container px-4 mx-auto sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="flex flex-col items-start justify-between gap-4 mb-6 sm:flex-row sm:items-center">
        <h1 class="text-2xl font-bold text-gray-900 lg:text-3xl dark:text-white">Manufacturers</h1>
        {% if user.is_authenticated %}
        <a href="{% url 'companies:manufacturer_create' %}" 
           class="transition-transform btn-primary hover:scale-105">
            <i class="mr-1 fas fa-plus"></i>Add Manufacturer
        </a>
        {% endif %}
    </div>

    <!-- Stats -->
    <div class="grid grid-cols-1 gap-4 mb-6 sm:grid-cols-3">
        <div class="p-4 bg-white rounded-lg shadow dark:bg-gray-800">
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Manufacturers</dt>
            <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">{{ total_manufacturers }}</dd>
        </div>
        <div class="p-4 bg-white rounded-lg shadow dark:bg-gray-800">
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Rides</dt>
            <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">{{ total_rides }}</dd>
        </div>
        <div class="p-4 bg-white rounded-lg shadow dark:bg-gray-800">
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Roller Coasters</dt>
            <dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">{{ total_roller_coasters }}</dd>
        </div>
    </div>

    <!-- Search and Filter -->
    <div class="p-4 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
        <form method="get" class="flex flex-col gap-4 sm:flex-row sm:items-end">
            <div class="flex-1">
                <label for="search" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Search</label>
                <input type="text" 
                       name="search" 
                       id="search" 
                       value="{{ request.GET.search }}"
                       placeholder="Search manufacturers..."
                       class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
            <div class="flex-1">
                <label for="country" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Country</label>
                <input type="text" 
                       name="country" 
                       id="country" 
                       value="{{ request.GET.country }}"
                       placeholder="Filter by country..."
                       class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
            <button type="submit" class="btn-primary">
                <i class="mr-1 fas fa-search"></i>Search
            </button>
            {% if request.GET.search or request.GET.country %}
            <a href="{% url 'companies:manufacturer_list' %}" class="btn-secondary">
                <i class="mr-1 fas fa-times"></i>Clear
            </a>
            {% endif %}
        </form>
    </div>

    <!-- Manufacturers Grid -->
    {% if manufacturers %}
    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {% for manufacturer in manufacturers %}
        <div class="p-6 transition-transform bg-white rounded-lg shadow hover:scale-[1.02] dark:bg-gray-800">
            <h2 class="mb-2 text-xl font-semibold">
                <a href="{% url 'companies:manufacturer_detail' manufacturer.slug %}" 
                   class="text-gray-900 hover:text-blue-600 dark:text-white dark:hover:text-blue-400">
                    {{ manufacturer.name }}
                </a>
            </h2>
            {% if manufacturer.headquarters %}
            <div class="flex items-center mb-2 text-gray-600 dark:text-gray-400">
                <i class="mr-2 fas fa-building"></i>
                {{ manufacturer.headquarters }}
            </div>
            {% endif %}
            {% if manufacturer.website %}
            <div class="flex items-center mb-4 text-gray-600 dark:text-gray-400">
                <i class="mr-2 fas fa-globe"></i>
                <a href="{{ manufacturer.website }}" 
                   class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                   target="_blank" rel="noopener noreferrer">
                    Website
                    <i class="ml-1 text-xs fas fa-external-link-alt"></i>
                </a>
            </div>
            {% endif %}
            <div class="flex flex-wrap gap-2">
                {% if manufacturer.total_rides %}
                <span class="px-2 py-1 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-50">
                    {{ manufacturer.total_rides }} Rides
                </span>
                {% endif %}
                {% if manufacturer.total_roller_coasters %}
                <span class="px-2 py-1 text-sm font-medium text-green-800 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-50">
                    {{ manufacturer.total_roller_coasters }} Coasters
                </span>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="p-6 text-center bg-white rounded-lg shadow dark:bg-gray-800">
        <p class="text-gray-500 dark:text-gray-400">No manufacturers found.</p>
    </div>
    {% endif %}

    <!-- Pagination -->
    {% if is_paginated %}
    <div class="flex justify-center mt-6">
        <nav class="inline-flex rounded-md shadow">
            {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}" 
               class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700">
                Previous
            </a>
            {% endif %}
            
            <span class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border-t border-b border-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300">
                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
            </span>
            
            {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}" 
               class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700">
                Next
            </a>
            {% endif %}
        </nav>
    </div>
    {% endif %}
</div>
{% endblock %}