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

{% block title %}{{ spec.name }} - Infrastructure 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.infra_job_list', project_id=project.id) }}">Infrastructure</a></li>
        <li><a href="{{ url_for('projects.infra_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 'Infrastructure specification' }}</p>
    </div>
</div>

<div class="stat-grid">
    <div class="card">
        <div class="muted">Provider</div>
        <div><span class="badge badge-secondary badge-lg">{{ spec.provider | 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">Resources</div>
        <div class="strong">{{ spec.resources|length }}</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">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.infra_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">Action</th>
                <th scope="col">State</th>
                <th scope="col">Status</th>
                <th scope="col">Started</th>
            </tr>
        </thead>
        <tbody>
            {% for job in recent_jobs %}
            <tr>
                <td><a href="{{ url_for('projects.infra_job_detail', project_id=project.id, job_id=job.id) }}">#{{ job.id }}</a></td>
                <td><span class="badge badge-info">{{ job.action | state_words }}</span></td>
                <td>{{ ui.status_badge(job.state) }}</td>
                <td>
                    {{ bm.build_status(job.status) }}
                </td>
                <td>{{ bm.build_started(job) }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table></div>
    {% else %}
    {{ ui.empty_state("No jobs yet") }}
    {% endif %}
</div>
{% endblock %}