{% extends "shared/frontend/base.html" %}

{% block title %}Concept 3: Power Table - BMC Hub{% endblock %}

{% block extra_css %}
<style>
    .power-table-container {
        background: var(--bg-card);
        border-radius: 8px;
        box-shadow: 0 2px 15px rgba(0,0,0,0.05);
        overflow: hidden;
    }

    .filter-bar {
        padding: 1rem;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        background: var(--bg-body);
        display: flex;
        gap: 1rem;
        align-items: center;
        flex-wrap: wrap;
    }

    .table-responsive {
        overflow-x: auto;
    }

    .power-table {
        width: 100%;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .power-table th {
        background: var(--bg-body);
        padding: 0.75rem 1rem;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        border-bottom: 2px solid rgba(0,0,0,0.1);
    }

    .power-table td {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        vertical-align: middle;
    }

    .power-table tr:hover td {
        background-color: var(--accent-light);
        cursor: pointer;
    }

    .col-checkbox { width: 40px; text-align: center; }
    .col-id { width: 120px; font-family: monospace; color: var(--accent); }
    .col-status { width: 100px; }
    .col-priority { width: 100px; }
    .col-subject { min-width: 300px; font-weight: 500; }
    .col-customer { width: 200px; }
    .col-assigned { width: 150px; }
    .col-updated { width: 150px; color: var(--text-secondary); }

    .status-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 6px;
    }

    .status-open { background-color: var(--info); }
    .status-in-progress { background-color: var(--warning); }
    .status-resolved { background-color: var(--success); }
    .status-closed { background-color: var(--text-secondary); }

    .priority-badge {
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .priority-high { background: #fff3cd; color: #856404; }
    .priority-critical { background: #f8d7da; color: #721c24; }
    .priority-normal { background: #e2e3e5; color: #383d41; }

    .avatar-sm {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 6px;
    }

    .bulk-actions {
        display: none;
        align-items: center;
        gap: 1rem;
        background: var(--accent);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-size: 0.9rem;
    }
    
    .bulk-actions.show {
        display: flex;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="h4 mb-0">Alle Tickets</h2>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-secondary"><i class="bi bi-download"></i> Eksportér</button>
            <button class="btn btn-primary"><i class="bi bi-plus-lg"></i> Ny Ticket</button>
        </div>
    </div>

    <div class="power-table-container">
        <!-- Filter Bar -->
        <div class="filter-bar">
            <div class="input-group" style="width: 300px;">
                <span class="input-group-text bg-white border-end-0"><i class="bi bi-search"></i></span>
                <input type="text" class="form-control border-start-0" placeholder="Søg...">
            </div>
            
            <select class="form-select" style="width: 150px;">
                <option selected>Status: Alle</option>
                <option>Ny</option>
                <option>I Gang</option>
                <option>Løst</option>
            </select>

            <select class="form-select" style="width: 150px;">
                <option selected>Prioritet: Alle</option>
                <option>Kritisk</option>
                <option>Høj</option>
                <option>Normal</option>
            </select>

            <select class="form-select" style="width: 150px;">
                <option selected>Tildelt: Alle</option>
                <option>Mig</option>
                <option>Ufordelt</option>
            </select>

            <div class="ms-auto text-muted small">
                Viser 1-50 af 142 tickets
            </div>
        </div>

        <!-- Bulk Actions Bar (Hidden by default) -->
        <div class="bg-light p-2 border-bottom d-none" id="bulkActions">
            <div class="d-flex align-items-center gap-3 px-2">
                <span class="fw-bold text-primary">3 valgt</span>
                <div class="vr"></div>
                <button class="btn btn-sm btn-outline-secondary">Sæt Status</button>
                <button class="btn btn-sm btn-outline-secondary">Tildel</button>
                <button class="btn btn-sm btn-outline-danger">Slet</button>
            </div>
        </div>

        <!-- Table -->
        <div class="table-responsive">
            <table class="power-table">
                <thead>
                    <tr>
                        <th class="col-checkbox"><input type="checkbox" class="form-check-input"></th>
                        <th class="col-id">ID</th>
                        <th class="col-subject">Emne</th>
                        <th class="col-customer">Kunde</th>
                        <th class="col-status">Status</th>
                        <th class="col-priority">Prioritet</th>
                        <th class="col-assigned">Tildelt</th>
                        <th class="col-updated">Opdateret</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="col-checkbox"><input type="checkbox" class="form-check-input"></td>
                        <td class="col-id">#TKT-005</td>
                        <td class="col-subject">Netværksproblem i hovedkontoret</td>
                        <td class="col-customer">
                            <img src="https://ui-avatars.com/api/?name=Tech+Corp&background=random" class="avatar-sm">
                            Tech Corp A/S
                        </td>
                        <td class="col-status"><span class="status-dot status-in-progress"></span>I Gang</td>
                        <td class="col-priority"><span class="priority-badge priority-high">Høj</span></td>
                        <td class="col-assigned">
                            <img src="https://ui-avatars.com/api/?name=Christian&background=0f4c75&color=fff" class="avatar-sm">
                            Christian
                        </td>
                        <td class="col-updated">10 min siden</td>
                    </tr>
                    
                    <tr>
                        <td class="col-checkbox"><input type="checkbox" class="form-check-input"></td>
                        <td class="col-id">#TKT-004</td>
                        <td class="col-subject">Server nede i produktion</td>
                        <td class="col-customer">
                            <img src="https://ui-avatars.com/api/?name=Fabrik+A/S&background=random" class="avatar-sm">
                            Fabrik A/S
                        </td>
                        <td class="col-status"><span class="status-dot status-open"></span>Ny</td>
                        <td class="col-priority"><span class="priority-badge priority-critical">Kritisk</span></td>
                        <td class="col-assigned"><span class="text-muted fst-italic">Ufordelt</span></td>
                        <td class="col-updated">1 time siden</td>
                    </tr>

                    {% for i in range(10) %}
                    <tr>
                        <td class="col-checkbox"><input type="checkbox" class="form-check-input"></td>
                        <td class="col-id">#TKT-00{{i}}</td>
                        <td class="col-subject">Support sag vedrørende faktura {{i}}</td>
                        <td class="col-customer">
                            <img src="https://ui-avatars.com/api/?name=Kunde+{{i}}&background=random" class="avatar-sm">
                            Kunde {{i}} ApS
                        </td>
                        <td class="col-status"><span class="status-dot status-resolved"></span>Løst</td>
                        <td class="col-priority"><span class="priority-badge priority-normal">Normal</span></td>
                        <td class="col-assigned">
                            <img src="https://ui-avatars.com/api/?name=Morten&background=random" class="avatar-sm">
                            Morten
                        </td>
                        <td class="col-updated">{{i}} dage siden</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}