{% 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="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Ride Manufacturers</h1>
        <p class="mt-2 text-gray-600 dark:text-gray-400">Companies that manufacture theme park rides and attractions</p>
    </div>

    <!-- Manufacturers List -->
    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {% for manufacturer in manufacturers %}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                <a href="{% url 'manufacturers:manufacturer_detail' manufacturer.slug %}" class="hover:text-blue-600 dark:hover:text-blue-400">
                    {{ manufacturer.name }}
                </a>
            </h3>
            
            {% if manufacturer.description %}
            <p class="text-gray-600 dark:text-gray-400 mb-4">{{ manufacturer.description|truncatewords:20 }}</p>
            {% endif %}
            
            <div class="text-sm text-gray-500 dark:text-gray-500">
                {% if manufacturer.rides_count %}
                <span class="inline-block mr-4">{{ manufacturer.rides_count }} ride{{ manufacturer.rides_count|pluralize }}</span>
                {% endif %}
                {% if manufacturer.founded_year %}
                <span class="inline-block">Founded {{ manufacturer.founded_year }}</span>
                {% endif %}
            </div>
        </div>
        {% empty %}
        <div class="col-span-full text-center py-12">
            <p class="text-gray-500 dark:text-gray-400">No manufacturers found.</p>
        </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if is_paginated %}
    <div class="mt-8 flex justify-center">
        <nav class="flex space-x-2">
            {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}" class="px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Previous</a>
            {% endif %}
            
            <span class="px-3 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded">
                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 bg-blue-600 text-white rounded hover:bg-blue-700">Next</a>
            {% endif %}
        </nav>
    </div>
    {% endif %}
</div>
{% endblock %}