{% extends "base.html" %}

{% block title %}My Tickets - Actix MVC App{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>My Support Tickets</h1>
    <a href="/tickets/new" class="btn btn-primary">New Ticket</a>
</div>

<div id="my-tickets-container">
    {% if tickets | length > 0 %}
    <div class="table-responsive">
        <table class="table table-hover">
            <thead class="table-light">
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Status</th>
                    <th>Priority</th>
                    <th>Created</th>
                    <th>Updated</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for ticket in tickets %}
                <tr>
                    <td>{{ ticket.id | truncate(length=8) }}</td>
                    <td>
                        <a href="/tickets/{{ ticket.id }}" up-layer="new modal" up-size="large">
                            {{ ticket.title }}
                        </a>
                    </td>
                    <td>
                        <span class="badge 
                            {% if ticket.status == 'Open' %}bg-danger{% endif %}
                            {% if ticket.status == 'In Progress' %}bg-warning{% endif %}
                            {% if ticket.status == 'Waiting for Customer' %}bg-info{% endif %}
                            {% if ticket.status == 'Resolved' %}bg-success{% endif %}
                            {% if ticket.status == 'Closed' %}bg-secondary{% endif %}
                        ">
                            {{ ticket.status }}
                        </span>
                    </td>
                    <td>
                        <span class="badge 
                            {% if ticket.priority == 'Low' %}bg-success{% endif %}
                            {% if ticket.priority == 'Medium' %}bg-info{% endif %}
                            {% if ticket.priority == 'High' %}bg-warning{% endif %}
                            {% if ticket.priority == 'Critical' %}bg-danger{% endif %}
                        ">
                            {{ ticket.priority }}
                        </span>
                    </td>
                    <td>{{ ticket.created_at | date(format="%Y-%m-%d %H:%M") }}</td>
                    <td>{{ ticket.updated_at | date(format="%Y-%m-%d %H:%M") }}</td>
                    <td>
                        <a href="/tickets/{{ ticket.id }}" class="btn btn-sm btn-outline-primary" up-layer="new modal" up-size="large">
                            View
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="alert alert-info">
        <h4 class="alert-heading">No tickets found!</h4>
        <p>You haven't created any support tickets yet.</p>
        <hr>
        <p class="mb-0">
            <a href="/tickets/new" class="btn btn-primary">Create Your First Ticket</a>
        </p>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Initialize Unpoly event handlers
    up.on('up:fragment:inserted', function(event) {
        // This will run whenever a fragment is updated via Unpoly
        console.log('Fragment updated:', event.target);
    });
</script>
{% endblock %}