<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{{ view.title }} · {{ room_name }}</title>
        <style>
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }

            body {
                font-family:
                    system-ui,
                    -apple-system,
                    sans-serif;
                background: #111827;
                color: #f3f4f6;
                min-height: 100vh;
                padding: 1rem;
            }

            header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.5rem 0 1rem;
                border-bottom: 1px solid #374151;
                margin-bottom: 1rem;
            }

            h1 {
                font-size: 1.25rem;
                font-weight: 600;
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }

            .room-badge {
                font-size: 0.7rem;
                background: #374151;
                padding: 0.2rem 0.5rem;
                border-radius: 4px;
                color: #9ca3af;
            }

            .header-right {
                display: flex;
                align-items: center;
                gap: 1.5rem;
            }

            .total {
                font-size: 1.5rem;
                font-weight: 700;
                color: #60a5fa;
            }

            .total small {
                font-size: 0.75rem;
                color: #9ca3af;
                font-weight: 400;
            }

            .back-link {
                color: #60a5fa;
                text-decoration: none;
                font-size: 0.9rem;
            }

            .back-link:hover {
                text-decoration: underline;
            }

            /* Pipeline/Column Layout (for grouped views) */
            .pipeline {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 0.75rem;
                margin-bottom: 1rem;
            }

            .column {
                background: #1f2937;
                border-radius: 8px;
                overflow: hidden;
                max-height: 80vh;
                display: flex;
                flex-direction: column;
            }

            .column-header {
                padding: 0.6rem 0.75rem;
                font-size: 0.8rem;
                font-weight: 600;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 2px solid #60a5fa;
                color: #60a5fa;
                background: #111827;
            }

            .column-count {
                font-size: 1rem;
                font-weight: 700;
            }

            .column-items {
                padding: 0.5rem;
                display: flex;
                flex-direction: column;
                gap: 0.4rem;
                overflow-y: auto;
                flex: 1;
            }

            /* Individual item card */
            .item-card {
                background: #111827;
                border-radius: 6px;
                padding: 0.6rem 0.7rem;
                font-size: 0.75rem;
                border-left: 3px solid #60a5fa;
                cursor: pointer;
                transition: background 0.15s;
            }

            .item-card:hover {
                background: #1f2937;
            }

            .item-id {
                font-weight: 600;
                color: #9ca3af;
                font-size: 0.7rem;
                margin-bottom: 0.25rem;
            }

            .item-primary {
                color: #d1d5db;
                font-weight: 500;
                margin-bottom: 0.25rem;
            }

            .item-meta {
                font-size: 0.7rem;
                color: #6b7280;
                margin-top: 0.3rem;
                display: flex;
                gap: 0.5rem;
                flex-wrap: wrap;
            }

            .meta-item {
                display: flex;
                align-items: center;
                gap: 0.2rem;
            }

            /* Icon indicators */
            .icon {
                display: inline-block;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #4ade80;
            }

            .icon.false {
                background: #6b7280;
            }

            /* Table Layout (for non-grouped views) */
            .table-container {
                background: #1f2937;
                border-radius: 8px;
                overflow-x: auto;
            }

            table {
                width: 100%;
                border-collapse: collapse;
                font-size: 0.85rem;
            }

            thead {
                background: #111827;
                position: sticky;
                top: 0;
            }

            th {
                text-align: left;
                padding: 0.75rem;
                font-weight: 600;
                color: #60a5fa;
                border-bottom: 2px solid #374151;
            }

            td {
                padding: 0.6rem 0.75rem;
                border-bottom: 1px solid #374151;
            }

            tr:hover {
                background: #252f3f;
            }

            .text-primary {
                color: #d1d5db;
                font-weight: 500;
            }

            .text-secondary {
                color: #9ca3af;
            }

            .text-muted {
                color: #6b7280;
                font-size: 0.8em;
            }

            /* Badge */
            .badge {
                display: inline-block;
                padding: 0.2rem 0.5rem;
                border-radius: 4px;
                font-size: 0.75rem;
                font-weight: 500;
            }

            .badge.pending {
                background: #7c2d12;
                color: #fbbf24;
            }

            .badge.active {
                background: #065f46;
                color: #4ade80;
            }

            /* Empty state */
            .empty {
                text-align: center;
                color: #6b7280;
                padding: 3rem;
                font-size: 0.9rem;
            }

            /* Footer */
            footer {
                margin-top: 1rem;
                padding-top: 1rem;
                border-top: 1px solid #374151;
                font-size: 0.7rem;
                color: #6b7280;
                display: flex;
                justify-content: space-between;
            }

            footer a {
                color: #60a5fa;
                text-decoration: none;
            }

            footer a:hover {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>
                {{ view.title }}
                <span class="room-badge">{{ room_name }}</span>
            </h1>
            <div class="header-right">
                <a href="/" class="back-link">← Back</a>
                <div class="total">
                    {{ total }}
                    <small>items</small>
                </div>
            </div>
        </header>

        <main>
            {% if total == 0 %}
            <div class="empty">No data found</div>
            {% elif view.group_by %}
            <!-- Grouped/Pipeline View -->
            <div class="pipeline">
                {% for group_key, group_data in grouped_results.items() %}
                <div class="column">
                    <div class="column-header">
                        <span>{{ group_data.label }}</span>
                        <span class="column-count"
                            >{{ group_data.items|length }}</span
                        >
                    </div>
                    <div class="column-items">
                        {% for item in group_data.items %}
                        <div class="item-card">
                            {% if item.id %}
                            <div class="item-id">#{{ item.id }}</div>
                            {% endif %} {% if item.username %}
                            <div class="item-primary">{{ item.username }}</div>
                            {% elif item.first_name %}
                            <div class="item-primary">
                                {{ item.first_name }} {{ item.last_name or '' }}
                            </div>
                            {% endif %}

                            <div class="item-meta">
                                {% if item.email %}
                                <span class="meta-item text-muted"
                                    >{{ item.email }}</span
                                >
                                {% endif %} {% if item.phone %}
                                <span class="meta-item text-muted"
                                    >{{ item.phone }}</span
                                >
                                {% endif %} {% if item.has_pets is defined %}
                                <span class="meta-item">
                                    <span
                                        class="icon {{ 'true' if item.has_pets else 'false' }}"
                                    ></span>
                                    Pets
                                </span>
                                {% endif %} {% if item.has_coverage is defined
                                %}
                                <span class="meta-item">
                                    <span
                                        class="icon {{ 'true' if item.has_coverage else 'false' }}"
                                    ></span>
                                    Coverage
                                </span>
                                {% endif %} {% if item.has_requests is defined
                                %}
                                <span class="meta-item">
                                    <span
                                        class="icon {{ 'true' if item.has_requests else 'false' }}"
                                    ></span>
                                    Requests
                                </span>
                                {% endif %} {% if item.has_turnos is defined %}
                                <span class="meta-item">
                                    <span
                                        class="icon {{ 'true' if item.has_turnos else 'false' }}"
                                    ></span>
                                    Turnos
                                </span>
                                {% endif %} {% if item.active_requests is
                                defined %}
                                <span class="meta-item"
                                    >{{ item.active_requests }} active</span
                                >
                                {% endif %}
                            </div>

                            {% if item.user_id %}
                            <div class="item-meta">
                                <span class="text-muted"
                                    >User ID: {{ item.user_id }}</span
                                >
                            </div>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <!-- Table View (non-grouped) -->
            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            {% for field in view.fields[:8] %}
                            <th>{{ field|replace('_', ' ')|title }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in results %}
                        <tr>
                            {% for field in view.fields[:8] %}
                            <td>
                                {% if item[field] is boolean %}
                                <span
                                    class="icon {{ 'true' if item[field] else 'false' }}"
                                ></span>
                                {% elif item[field] is number %} {{ item[field]
                                }} {% else %} {{ item[field] or '-' }} {% endif
                                %}
                            </td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% endif %}
        </main>

        <footer>
            <span>{{ view.description }}</span>
            <div>
                <a href="/api/view/{{ view.slug }}">JSON</a> ·
                <a href="/">Home</a>
            </div>
        </footer>
    </body>
</html>
