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

{% block title %}Create Build Specification - {{ 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.build_spec_list', project_id=project.id) }}">Build Specifications</a></li>
        <li aria-current="page">Create</li>
    </ol>
</nav>

<div class="page-header">
    <h1>Create Build Specification</h1>
    <p>Define a new build configuration</p>
</div>

<div class="card narrow">
    <form method="post">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        
        <div class="form-group">
            <label for="name">Specification Name *</label>
            <input type="text" id="name" name="name" class="form-control" required
                   placeholder="my-build" value="{{ form_data.name if form_data else '' }}"{{ ui.invalid_attrs(errors, 'name') }}>
            {{ ui.field_error(errors, 'name') }}
        </div>
        
        <div class="form-group">
            <label for="repository_id">Repository *</label>
            <select id="repository_id" name="repository_id" class="form-control" required>
                <option value="">Select a repository...</option>
                {% for repo in repositories %}
                <option value="{{ repo.id }}" {% if form_data and form_data.repository_id == repo.id|string %}selected{% endif %}>{{ repo.name }}</option>
                {% endfor %}
            </select>
        </div>
        
        <div class="form-group">
            <label for="branch">Branch</label>
            <input type="text" id="branch" name="branch" class="form-control"
                   value="{{ form_data.branch if form_data else 'main' }}" placeholder="main"{{ ui.invalid_attrs(errors, 'branch') }}>
            {{ ui.field_error(errors, 'branch') }}
        </div>
        
        <div class="form-group">
            <label for="timeout_minutes">Timeout (minutes)</label>
            <input type="number" id="timeout_minutes" name="timeout_minutes" class="form-control"
                   value="{{ form_data.timeout_minutes if form_data else '60' }}" min="1" max="480"{{ ui.invalid_attrs(errors, 'timeout_minutes') }}>
            {{ ui.field_error(errors, 'timeout_minutes') }}
        </div>
        
        <div class="form-group">
            <label for="steps">Build Steps (JSON)</label>
            <textarea id="steps" name="steps" class="form-control" rows="8"
                      placeholder='[{"name": "checkout", "type": "checkout", "config": {}}, {"name": "build", "type": "script", "config": {"script": "make build"}}]'{{ ui.invalid_attrs(errors, 'steps', 'steps-help') }}>{{ form_data.steps if form_data else '[]' }}</textarea>
            {{ ui.field_error(errors, 'steps') }}
            <div id="steps-help" class="form-text">JSON array of build step definitions</div>
            {% include "projects/builds/_step_format.html" %}
        </div>
        
        <div class="form-group">
            <label for="environment">Environment Variables (JSON)</label>
            <textarea id="environment" name="environment" class="form-control" rows="4"
                      placeholder='{"VAR_NAME": "value"}'>{{ form_data.environment if form_data else '{}' }}</textarea>
        </div>
        
        <div class="form-group">
            <label for="description">Description</label>
            <textarea id="description" name="description" class="form-control" rows="2">{{ form_data.description if form_data else '' }}</textarea>
        </div>
        
        <div class="actions-row mt-lg">
            <button type="submit" class="btn btn-primary">
                {{ ui.icon("add") }} Create Specification
            </button>
            <a href="{{ url_for('projects.build_spec_list', project_id=project.id) }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}