{#
    Mobile Card Component
    Generic responsive card layout for mobile table replacement

    This is a documentation template showing the structure.
    Each page should implement its own card with specific content.

    Example Usage in a list page:

    {# Desktop Table #}
    <div class="hidden md:block overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            ... full table ...
        </table>
    </div>

    {# Mobile Cards #}
    <div class="md:hidden space-y-4">
        {% for item in items %}
            {% include 'admin/components/mobile_card_item.html.twig' with {
                'item': item,
                'title': item.name,
                'subtitle': item.email,
                'status': item.status,
                'icon': 'fa-user',
                'fields': {
                    'Role': item.role,
                    'Date': item.createdAt|date('d/m/Y')
                },
                'actions': [
                    {'url': path('admin_item_show', {id: item.id}), 'icon': 'fa-eye', 'color': 'text-indigo-600'},
                    {'url': path('admin_item_edit', {id: item.id}), 'icon': 'fa-edit', 'color': 'text-blue-600'}
                ]
            } %}
        {% endfor %}
    </div>
#}

{#
    Basic Mobile Card Structure
    Copy and customize this structure in each template
#}

{# Example Card Implementation #}
{% set exampleCard %}
<div class="bg-white shadow rounded-lg p-4">
    {# Header: Avatar/Icon + Title + Badge #}
    <div class="flex items-center justify-between mb-3">
        <div class="flex items-center">
            {# Avatar or Icon #}
            <div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0">
                <i class="fas fa-user text-indigo-600"></i>
            </div>

            {# Title and Subtitle #}
            <div class="ml-3">
                <div class="text-sm font-medium text-gray-900">John Doe</div>
                <div class="text-xs text-gray-500">john@example.com</div>
            </div>
        </div>

        {# Status Badge #}
        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
            Actif
        </span>
    </div>

    {# Content: Key Information Grid #}
    <div class="grid grid-cols-2 gap-3 text-sm border-t border-gray-200 pt-3">
        <div>
            <span class="text-gray-500">Rôle:</span>
            <span class="font-medium text-gray-900 block">Admin</span>
        </div>
        <div>
            <span class="text-gray-500">Date:</span>
            <span class="font-medium text-gray-900 block">01/12/2025</span>
        </div>
        <div>
            <span class="text-gray-500">2FA:</span>
            <span class="font-medium text-gray-900 block">Activé</span>
        </div>
        <div>
            <span class="text-gray-500">Email:</span>
            <span class="font-medium text-gray-900 block">Vérifié</span>
        </div>
    </div>

    {# Footer: Action Buttons #}
    <div class="flex justify-end space-x-3 mt-3 pt-3 border-t border-gray-200">
        <a href="#" class="text-indigo-600 hover:text-indigo-900" title="Voir">
            <i class="fas fa-eye"></i>
        </a>
        <a href="#" class="text-blue-600 hover:text-blue-900" title="Modifier">
            <i class="fas fa-edit"></i>
        </a>
        <a href="#" class="text-red-600 hover:text-red-900" title="Supprimer">
            <i class="fas fa-trash"></i>
        </a>
    </div>
</div>
{% endset %}

{#
    Variations for Different Contexts:

    1. List with Images (Users, Profiles):
       - Use <img> instead of icon
       - Show profile photo

    2. Status-Heavy Lists (Login Attempts, Logs):
       - Multiple status badges
       - Color-coded indicators

    3. Data-Heavy Lists (HTTP Requests, Tokens):
       - More fields in grid
       - Expandable sections

    4. Action-Heavy Lists (IP Blocks, Devices):
       - More action buttons
       - Inline forms for quick actions
#}

{#
    Status Badge Helper Colors:

    Green (Success):    bg-green-100 text-green-800
    Red (Error):        bg-red-100 text-red-800
    Yellow (Warning):   bg-yellow-100 text-yellow-800
    Blue (Info):        bg-blue-100 text-blue-800
    Gray (Neutral):     bg-gray-100 text-gray-800
    Indigo (Primary):   bg-indigo-100 text-indigo-800
#}

{#
    Icon Colors for Actions:

    View:      text-indigo-600 hover:text-indigo-900
    Edit:      text-blue-600 hover:text-blue-900
    Delete:    text-red-600 hover:text-red-900
    Download:  text-green-600 hover:text-green-900
    Lock:      text-yellow-600 hover:text-yellow-900
#}