{% extends "projects/base.html" %}
{% import "site_shell/_macros.html" as ui %}

{% block title %}{{ event.name }} - Event - {{ project.name }} - Pychestrate{% endblock %}

{% block content %}
<nav aria-label="Breadcrumb">
    <ol class="breadcrumb">
        <li><a href="{{ url_for('projects.project_list') }}">Projects</a></li>
        <li><a href="{{ url_for('projects.project_detail', project_id=project.id) }}">{{ project.name }}</a></li>
        <li><a href="{{ url_for('projects.calendar_view', project_id=project.id) }}">Calendar</a></li>
        <li><a href="{{ url_for('projects.release_event_list', project_id=project.id) }}">Events</a></li>
        <li aria-current="page">{{ event.name }}</li>
    </ol>
</nav>

<div class="page-header page-header--split">
    <div>
        <h1>{{ event.name }}</h1>
        <p>{{ event.description or 'Release event' }}</p>
    </div>
    <div>
        <span class="badge badge-secondary" style="font-size: 1rem; font-family: monospace;">{{ event.release_version }}</span>
    </div>
</div>

<div class="stat-grid">
    <div class="card">
        <div class="muted">Release</div>
        <div class="strong">
            <a href="{{ url_for('projects.release_detail', project_id=project.id, release_id=event.release_id) }}">{{ event.release_name }}</a>
        </div>
    </div>
    <div class="card">
        <div class="muted">Start</div>
        <div class="strong">{{ event.start_time | format_datetime('%Y-%m-%d %H:%M') }}</div>
    </div>
    <div class="card">
        <div class="muted">End</div>
        <div class="strong">{{ event.end_time | format_datetime('%Y-%m-%d %H:%M') }}</div>
    </div>
    <div class="card">
        <div class="muted">Phases</div>
        <div class="strong">{{ phases | length }}</div>
    </div>
</div>

<div class="card">
    <h2 class="card-header">Event Details</h2>
    <div class="table-scroll" tabindex="0"><table class="data-table">
        <tr>
            <th scope="row">Release Version</th>
            <td class="mono">{{ event.release_version }}</td>
        </tr>
        <tr>
            <th scope="row">Release Name</th>
            <td>{{ event.release_name }}</td>
        </tr>
        <tr>
            <th scope="row">Created</th>
            <td>{{ event.created_at | format_datetime('%Y-%m-%d %H:%M:%S') }}</td>
        </tr>
        <tr>
            <th scope="row">Updated</th>
            <td>{{ event.updated_at | format_datetime('%Y-%m-%d %H:%M:%S') }}</td>
        </tr>
    </table></div>
</div>

<div class="card mt">
    <h2 class="card-header">Phases</h2>
    {% if phases %}
    <div class="table-scroll" tabindex="0"><table class="data-table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Status</th>
                <th scope="col">Start</th>
                <th scope="col">End</th>
            </tr>
        </thead>
        <tbody>
            {% for phase in phases %}
            <tr>
                <td>{{ phase.order }}</td>
                <th scope="row">{{ phase.name }}{% if phase.description %} <span class="muted">- {{ phase.description }}</span>{% endif %}</th>
                <td>
                    {{ ui.status_badge(phase.status) }}
                </td>
                <td>{{ phase.start_time | format_datetime('%Y-%m-%d %H:%M') }}</td>
                <td>{{ phase.end_time | format_datetime('%Y-%m-%d %H:%M') }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table></div>
    {% else %}
    {{ ui.empty_state("This event has no phases.") }}
    {% endif %}
</div>
{% endblock %}