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

{% block title %}{{ spec.name }} - Test Spec - {{ 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.test_job_list', project_id=project.id) }}">Tests</a></li>
        <li><a href="{{ url_for('projects.test_spec_list', project_id=project.id) }}">Specifications</a></li>
        <li aria-current="page">{{ spec.name }}</li>
    </ol>
</nav>

<div class="page-header page-header--split">
    <div>
        <h1>{{ spec.name }}</h1>
        <p>{{ spec.description or 'Test specification' }}</p>
    </div>
</div>

<div class="stat-grid">
    <div class="card">
        <div class="muted">Framework</div>
        <div><span class="badge badge-secondary badge-lg">{{ spec.framework | state_words }}</span></div>
    </div>
    <div class="card">
        <div class="muted">Version</div>
        <div class="strong">v{{ spec.version }}</div>
    </div>
    <div class="card">
        <div class="muted">Timeout</div>
        <div class="strong">{{ spec.timeout_minutes }} minutes</div>
    </div>
    <div class="card">
        <div class="muted">Result Format</div>
        <div class="strong">{{ spec.result_format | state_words }}</div>
    </div>
</div>

<div class="card">
    <h2 class="card-header">Specification Details</h2>
    <div class="table-scroll" tabindex="0"><table class="data-table">
        <tr>
            <th scope="row">Test Command</th>
            <td class="mono">{{ spec.test_command }}</td>
        </tr>
        <tr>
            <th scope="row">Test Selection</th>
            <td class="mono">{{ spec.test_selection or 'all tests' }}</td>
        </tr>
        <tr>
            <th scope="row">Build Reference</th>
            <td>{% if spec.build_ref %}<a href="{{ url_for('projects.build_spec_detail', project_id=project.id, spec_id=spec.build_ref) }}">Build specification #{{ spec.build_ref }}</a>{% else %}none{% endif %}</td>
        </tr>
        <tr>
            <th scope="row">Infrastructure Reference</th>
            <td>{% if spec.infra_ref %}<a href="{{ url_for('projects.infra_spec_detail', project_id=project.id, spec_id=spec.infra_ref) }}">Infrastructure specification #{{ spec.infra_ref }}</a>{% else %}none{% endif %}</td>
        </tr>
        <tr>
            <th scope="row">Environment</th>
            <td class="mono">{% if spec.environment %}{% for key, value in spec.environment.items() %}{{ key }}={{ value }}<br>{% endfor %}{% else %}none{% endif %}</td>
        </tr>
        <tr>
            <th scope="row">Created</th>
            <td>{{ spec.created_at | format_datetime('%Y-%m-%d %H:%M:%S') }}</td>
        </tr>
        <tr>
            <th scope="row">Updated</th>
            <td>{{ spec.updated_at | format_datetime('%Y-%m-%d %H:%M:%S') }}</td>
        </tr>
    </table></div>
</div>

<div class="card mt">
    <h2 class="card-header split">Recent Jobs <a href="{{ url_for('projects.test_job_list', project_id=project.id, spec_id=spec.id) }}" class="btn btn-sm btn-secondary regular">View all</a></h2>
    {% if recent_jobs %}
    <div class="table-scroll" tabindex="0"><table class="data-table">
        <thead>
            <tr>
                <th scope="col">Job</th>
                <th scope="col">Status</th>
                <th scope="col">Passed</th>
                <th scope="col">Failed</th>
                <th scope="col">Started</th>
            </tr>
        </thead>
        <tbody>
            {% for job in recent_jobs %}
            <tr>
                <td><a href="{{ url_for('projects.test_job_detail', project_id=project.id, job_id=job.id) }}">#{{ job.id }}</a></td>
                <td>
                    {{ bm.build_status(job.status) }}
                </td>
                <td class="text-success">{{ job.result_summary.passed if job.result_summary else '-' }}</td>
                <td class="text-danger">{{ job.result_summary.failed if job.result_summary else '-' }}</td>
                <td>{{ bm.build_started(job) }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table></div>
    {% else %}
    {{ ui.empty_state("No jobs yet") }}
    {% endif %}
</div>
{% endblock %}