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

{% block title %}Arkiveret Ticket - BMC Hub{% endblock %}

{% block extra_css %}
<style>
        .detail-card {
            background: var(--bg-card);
            border-radius: var(--border-radius);
            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .meta-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .meta-value {
            font-weight: 600;
            color: var(--text-primary);
        }

        .ticket-number {
            font-family: 'Monaco', 'Courier New', monospace;
            background: var(--accent-light);
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            font-size: 0.85rem;
            color: var(--accent);
            font-weight: 600;
        }

        .message-card {
            border: 1px solid var(--accent-light);
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1rem;
            background: var(--bg-body);
        }

        .message-meta {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        .message-type {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            background: var(--accent-light);
            color: var(--accent);
            padding: 0.2rem 0.5rem;
            border-radius: 6px;
        }

        .long-text {
            white-space: pre-wrap;
            word-break: break-word;
            line-height: 1.6;
            font-size: 1rem;
        }

        .long-text p {
            margin: 0 0 0.75rem;
        }

        .long-text ul {
            margin: 0.5rem 0 0.75rem 1.25rem;
        }

        .long-text li {
            margin-bottom: 0.35rem;
        }
</style>
{% endblock %}

{% block content %}
    <div class="container-fluid px-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="mb-2">
                    <i class="bi bi-archive"></i> Arkiveret Ticket
                </h1>
                <p class="text-muted">Detaljer fra Simply-CRM import</p>
            </div>
            <a href="/ticket/archived" class="btn btn-outline-primary">
                <i class="bi bi-arrow-left"></i> Tilbage til liste
            </a>
        </div>

        <div class="detail-card">
            <div class="row g-3">
                <div class="col-md-8">
                    {% if ticket.ticket_number %}
                        <span class="ticket-number">{{ ticket.ticket_number }}</span>
                    {% endif %}
                    <h2 class="mt-2">{{ ticket.title or 'Ingen titel' }}</h2>
                </div>
                <div class="col-md-4 text-md-end">
                    {% if ticket.status %}
                        <span class="message-type">{{ ticket.status.replace('_', ' ').title() }}</span>
                    {% endif %}
                </div>
            </div>

            <div class="row g-4 mt-3">
                <div class="col-md-3">
                    <div class="meta-label">Organisation</div>
                    <div class="meta-value">{{ ticket.organization_name or '-' }}</div>
                </div>
                <div class="col-md-3">
                    <div class="meta-label">Kontakt</div>
                    <div class="meta-value">{{ ticket.contact_name or '-' }}</div>
                </div>
                <div class="col-md-3">
                    <div class="meta-label">Email From</div>
                    <div class="meta-value">{{ ticket.email_from or '-' }}</div>
                </div>
                <div class="col-md-3">
                    <div class="meta-label">Tid brugt</div>
                    <div class="meta-value">
                        {% if ticket.time_spent_hours is not none %}
                            {{ '%.2f'|format(ticket.time_spent_hours) }} t
                        {% else %}
                            -
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="meta-label">Prioritet</div>
                    <div class="meta-value">{{ ticket.priority or '-' }}</div>
                </div>
                <div class="col-md-3">
                    <div class="meta-label">Oprettet</div>
                    <div class="meta-value">
                        {% if ticket.source_created_at %}
                            {{ ticket.source_created_at.strftime('%Y-%m-%d %H:%M') }}
                        {% else %}
                            -
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="meta-label">Opdateret</div>
                    <div class="meta-value">
                        {% if ticket.source_updated_at %}
                            {{ ticket.source_updated_at.strftime('%Y-%m-%d %H:%M') }}
                        {% else %}
                            -
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="detail-card">
            <h5>Beskrivelse</h5>
            {% if description_html %}
            <div class="text-muted long-text">{{ description_html | safe }}</div>
            {% elif ticket.description %}
            <div class="text-muted long-text">{{ ticket.description | e | replace('\n', '<br>') | safe }}</div>
            {% else %}
            <div class="text-muted long-text">Ingen beskrivelse</div>
            {% endif %}
        </div>

        <div class="detail-card">
            <h5>Løsning</h5>
            {% if solution_html %}
            <div class="text-muted long-text">{{ solution_html | safe }}</div>
            {% elif ticket.solution %}
            <div class="text-muted long-text">{{ ticket.solution | e | replace('\n', '<br>') | safe }}</div>
            {% else %}
            <div class="text-muted long-text">Ingen løsning angivet</div>
            {% endif %}
        </div>

        <div class="detail-card">
            <h5>Kommentarer og Emails</h5>
            {% if messages %}
                {% for message in messages %}
                    <div class="message-card">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <span class="message-type">{{ message.message_type }}</span>
                                {% if message.subject %}
                                    <strong class="ms-2">{{ message.subject }}</strong>
                                {% endif %}
                            </div>
                            <div class="message-meta">
                                {% if message.source_created_at %}
                                    {{ message.source_created_at.strftime('%Y-%m-%d %H:%M') }}
                                {% else %}
                                    -
                                {% endif %}
                            </div>
                        </div>
                        <div class="message-meta mt-2">
                            {% if message.author_name %}
                                {{ message.author_name }}
                            {% endif %}
                            {% if message.author_email %}
                                ({{ message.author_email }})
                            {% endif %}
                        </div>
                        <div class="mt-3">
                            {% if message.body_html %}
                            <div class="mb-0 long-text">{{ message.body_html | safe }}</div>
                            {% elif message.body %}
                            <div class="mb-0 long-text">{{ message.body | e | replace('\n', '<br>') | safe }}</div>
                            {% else %}
                            <div class="mb-0 long-text">Ingen tekst</div>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <p class="text-muted">Ingen kommentarer eller emails fundet.</p>
            {% endif %}
        </div>
    </div>
{% endblock %}