{% extends "admin/base_new.html" %}

{% block title %}{{ model_name }} - {{ site_name }}{% endblock %}

{% block breadcrumb %}
<nav class="admin-breadcrumb" aria-label="Breadcrumb">
    <a href="{{ request.url_for('admin:index') }}" class="breadcrumb-link">Home</a>
    <span class="breadcrumb-separator">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="m9 18 6-6-6-6"/>
        </svg>
    </span>
    <a href="{{ request.url_for('admin:app_index', app_label=app_label) }}" class="breadcrumb-link">{{ app_label }}</a>
    <span class="breadcrumb-separator">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="m9 18 6-6-6-6"/>
        </svg>
    </span>
    <span class="breadcrumb-current">{{ model_name }}</span>
</nav>
{% endblock %}

{% block content %}
<div class="page-header">
    <div class="page-header-content">
        <h1>{{ model_name }}</h1>
        {% if objects %}
        <span class="badge badge-secondary">{{ objects|length }} record{% if objects|length != 1 %}s{% endif %}</span>
        {% endif %}
    </div>
    <div class="page-actions">
        {% if can_add %}
        <a href="{{ request.url_for('admin:model_add', app_label=app_label, model_name=model_name|lower) }}" class="btn btn-primary">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="12" y1="5" x2="12" y2="19"/>
                <line x1="5" y1="12" x2="19" y2="12"/>
            </svg>
            Add {{ model_name }}
        </a>
        {% endif %}
    </div>
</div>

{% if search_fields %}
<div class="card search-card">
    <form method="get" class="search-form">
        <div class="search-input-group">
            <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8"/>
                <path d="m21 21-4.35-4.35"/>
            </svg>
            <input 
                type="search" 
                name="q" 
                value="{{ search_query }}" 
                placeholder="Search {{ model_name }}..." 
                class="form-input search-input"
            >
            <button type="submit" class="btn btn-primary">Search</button>
            {% if search_query %}
            <a href="{{ request.url_for('admin:model_list', app_label=app_label, model_name=model_name|lower) }}" class="btn btn-ghost">Clear</a>
            {% endif %}
        </div>
    </form>
</div>
{% endif %}

{% if search_query %}
<div class="alert alert-info">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="10"/>
        <line x1="12" y1="16" x2="12" y2="12"/>
        <line x1="12" y1="8" x2="12.01" y2="8"/>
    </svg>
    <span>Showing {{ objects|length }} result{% if objects|length != 1 %}s{% endif %} for "{{ search_query }}"</span>
</div>
{% endif %}

<div class="card" style="padding: 0; overflow: hidden;">
    {% if objects %}
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    {% for field_name in list_display %}
                    <th>{{ field_name.replace('_', ' ').title() }}</th>
                    {% endfor %}
                    <th class="actions-column">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for row in objects %}
                <tr>
                    {% for value in row["values"] %}
                    <td>
                        {% if loop.first %}
                        <a href="{{ request.url_for('admin:model_change', app_label=app_label, model_name=model_name|lower, pk=row['obj'].id|string) }}" class="table-link-primary">
                            {{ value if value and value != '-' else '—' }}
                        </a>
                        {% elif value == '✓' %}
                        <span class="value-badge value-badge-success">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                            Yes
                        </span>
                        {% elif value == '✗' %}
                        <span class="value-badge value-badge-danger">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                                <line x1="18" y1="6" x2="6" y2="18"/>
                                <line x1="6" y1="6" x2="18" y2="18"/>
                            </svg>
                            No
                        </span>
                        {% elif value == '-' or not value %}
                        <span class="value-null">—</span>
                        {% elif value and '...' in value|string and value|string|length <= 12 %}
                        <code class="value-code">{{ value }}</code>
                        {% else %}
                        {{ value }}
                        {% endif %}
                    </td>
                    {% endfor %}
                    <td class="actions-cell">
                        <a href="{{ request.url_for('admin:model_change', app_label=app_label, model_name=model_name|lower, pk=row['obj'].id|string) }}" 
                           class="btn btn-sm btn-ghost" title="Edit">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                            </svg>
                            Edit
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        {% if search_query %}
        <div class="empty-state-icon">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <circle cx="11" cy="11" r="8"/>
                <path d="m21 21-4.35-4.35"/>
                <line x1="8" y1="8" x2="14" y2="14"/>
                <line x1="14" y1="8" x2="8" y2="14"/>
            </svg>
        </div>
        <h3>No results found</h3>
        <p class="text-muted">No {{ model_name }} objects match "{{ search_query }}".</p>
        <a href="{{ request.url_for('admin:model_list', app_label=app_label, model_name=model_name|lower) }}" class="btn btn-secondary">
            Clear Search
        </a>
        {% else %}
        <div class="empty-state-icon">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                <line x1="3" y1="9" x2="21" y2="9"/>
                <line x1="9" y1="21" x2="9" y2="9"/>
            </svg>
        </div>
        <h3>No {{ model_name }} objects yet</h3>
        <p class="text-muted">Get started by creating your first {{ model_name }}.</p>
        {% if can_add %}
        <a href="{{ request.url_for('admin:model_add', app_label=app_label, model_name=model_name|lower) }}" class="btn btn-primary">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="12" y1="5" x2="12" y2="19"/>
                <line x1="5" y1="12" x2="19" y2="12"/>
            </svg>
            Add {{ model_name }}
        </a>
        {% endif %}
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}