{% extends "base.html" %}

{% block title %}Exception {{ exception.exception_number }} - LSMC Hub{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <div class="header-content">
            <div>
                <h1>Exception {{ exception.exception_number }}</h1>
                <p class="subtitle">
                    <span class="badge badge-type">{{ exception.exception_type }}</span>
                    <span class="badge badge-status badge-{{ exception.status|lower }}">{{ exception.status }}</span>
                </p>
            </div>
            <div class="header-actions">
                <a href="/exceptions" class="btn btn-secondary">Back to Queue</a>
            </div>
        </div>
    </div>

    <div class="detail-grid">
        <!-- Exception Details -->
        <div class="detail-section">
            <h2>Exception Details</h2>
            <dl class="detail-list">
                <dt>Exception Number:</dt>
                <dd>{{ exception.exception_number }}</dd>

                <dt>Type:</dt>
                <dd>{{ exception.exception_type }}</dd>

                <dt>Status:</dt>
                <dd>
                    <span class="badge badge-status badge-{{ exception.status|lower }}">
                        {{ exception.status }}
                    </span>
                </dd>

                <dt>Created:</dt>
                <dd>{{ exception.created_at | format_dt(user_preferences) }}</dd>

                {% if exception.trigger_entity_type %}
                <dt>Trigger Entity:</dt>
                <dd>{{ exception.trigger_entity_type }}</dd>
                {% endif %}

                {% if exception.assigned_to %}
                <dt>Assigned To:</dt>
                <dd>{{ exception.assigned_to_name or exception.assigned_to }}</dd>
                {% endif %}

                {% if exception.resolved_at %}
                <dt>Resolved:</dt>
                <dd>{{ exception.resolved_at }}</dd>
                {% endif %}
            </dl>
        </div>

        <!-- Scanned Data -->
        {% if exception.scanned_data %}
        <div class="detail-section">
            <h2>Scanned Data</h2>
            <pre class="code-block">{{ exception.scanned_data | tojson(indent=2) }}</pre>
        </div>
        {% endif %}

        <!-- Related Entities -->
        <div class="detail-section">
            <h2>Related Entities</h2>
            <dl class="detail-list">
                {% if exception.order_id %}
                <dt>TRF:</dt>
                <dd>
                    <a href="/trfs/{{ exception.order_id }}" class="link-primary">
                        {{ exception.order_number or exception.order_id }}
                    </a>
                </dd>
                {% endif %}

                {% if exception.external_object_id %}
                <dt>External Object:</dt>
                <dd>
                    {% if exception.external_object_url %}
                    <a href="{{ exception.external_object_url }}" class="link-primary">{{ exception.external_object_id }}</a>
                    {% else %}
                    {{ exception.external_object_id }}
                    {% endif %}
                </dd>
                {% endif %}

                {% if exception.shipment_id %}
                <dt>Shipment:</dt>
                <dd>
                    <a href="/shipments/{{ exception.shipment_id }}" class="link-primary">
                        {{ exception.shipment_number or exception.shipment_id }}
                    </a>
                </dd>
                {% endif %}

                {% if not exception.order_id and not exception.external_object_id and not exception.shipment_id %}
                <dd class="text-muted">No related entities</dd>
                {% endif %}
            </dl>
        </div>

        <!-- Resolution -->
        {% if exception.resolution_notes %}
        <div class="detail-section">
            <h2>Resolution</h2>
            <p>{{ exception.resolution_notes }}</p>
            {% if exception.resolved_by %}
            <p class="text-muted">Resolved by {{ exception.resolved_by_name or exception.resolved_by }} on {{ exception.resolved_at }}</p>
            {% endif %}
        </div>
        {% endif %}

        <!-- Actions -->
        <div class="detail-section">
            <h2>Actions</h2>
            <div class="action-buttons">
                {% if exception.status in ['OPEN', 'ASSIGNED'] %}
                <form method="post" action="/exceptions/{{ exception.exception_number }}/assign" style="display: inline;">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <button type="submit" class="btn btn-primary">Assign to Me</button>
                </form>

                <form method="post" action="/exceptions/{{ exception.exception_number }}/escalate" style="display: inline;">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <button type="submit" class="btn btn-warning">Escalate</button>
                </form>
                {% endif %}

                {% if exception.status in ['ASSIGNED', 'IN_PROGRESS'] %}
                <button type="button" class="btn btn-success" onclick="showResolveForm()">Resolve</button>
                {% endif %}

                {% if exception.status == 'RESOLVED' %}
                <form method="post" action="/exceptions/{{ exception.exception_number }}/close" style="display: inline;">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <button type="submit" class="btn btn-secondary">Close</button>
                </form>
                {% endif %}
            </div>

            <!-- Resolve Form (hidden by default) -->
            <div id="resolveForm" style="display: none; margin-top: 1rem;">
                <form method="post" action="/exceptions/{{ exception.exception_number }}/resolve">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <div class="form-group">
                        <label for="resolution_notes">Resolution Notes:</label>
                        <textarea name="resolution_notes" id="resolution_notes" rows="4" required class="form-control"></textarea>
                    </div>
                    <button type="submit" class="btn btn-success">Submit Resolution</button>
                    <button type="button" class="btn btn-secondary" onclick="hideResolveForm()">Cancel</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function showResolveForm() {
    document.getElementById('resolveForm').style.display = 'block';
}

function hideResolveForm() {
    document.getElementById('resolveForm').style.display = 'none';
}
</script>
{% endblock %}