{% extends 'base.html' %}
{% block title %}Edit YAML and Generate - AutograderGen{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/editor.css') }}">
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="mb-1">Edit YAML and Generate</h1>
    </div>
    <div class="d-flex gap-2">
        <button type="button" class="btn btn-outline-secondary" id="new-btn" onclick="createNewConfig()">
            <i class="fas fa-file me-1"></i> New
        </button>
        <button type="button" class="btn btn-outline-secondary" id="upload-btn"
            onclick="document.getElementById('config-upload').click()">
            <i class="fas fa-upload me-1"></i> New from YAML
        </button>
        <input type="file" id="config-upload" class="d-none" accept=".yaml,.yml" onchange="handleConfigUpload(this)">
        <button type="button" class="btn btn-primary" id="validate-btn" onclick="validateConfig()">
            <i class="fas fa-check-circle me-1"></i> Validate & Export
        </button>
        <button type="button" class="btn btn-outline-secondary" id="download-yaml-btn" onclick="downloadYamlConfig()">
            <i class="fas fa-file-arrow-down me-1"></i> Download YAML
        </button>
    </div>
</div>

<div id="alert-container"></div>

<div id="export-section" class="card border-primary mb-4 d-none">
    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="fas fa-check-circle me-2"></i>Validate & Export</h5>
        <span class="badge bg-light text-primary font-monospace">Ready</span>
    </div>
    <div class="card-body">
        <div class="mb-4">
            <h6 class="font-weight-bold text-secondary mb-2"><i class="fas fa-terminal me-2"></i>Validation & Execution Logs</h6>
            <pre id="validation-log" class="bg-dark text-light p-3 rounded font-monospace small mb-0" style="max-height: 200px; overflow-y: auto; line-height: 1.6;"></pre>
        </div>
        <div class="d-flex flex-column align-items-center justify-content-center py-4 border rounded bg-light">
            <button type="button" class="btn btn-primary btn-lg px-5 py-3 shadow" onclick="downloadExport('bundle_zip')">
                <i class="fas fa-box-archive me-2"></i> Export All Assets (ZIP)
            </button>
        </div>
    </div>
</div>

<div id="editor-mode-toggle-container" class="d-flex justify-content-between align-items-center mb-4">
    <div class="btn-group shadow-sm" role="group" aria-label="Editor Mode">
        <button type="button" class="btn btn-primary mode-toggle-btn px-4" id="mode-text-btn" onclick="setMode('text')">
            <i class="fas fa-code me-2"></i>Text Mode (YAML)
        </button>
        <button type="button" class="btn btn-outline-primary mode-toggle-btn px-4" id="mode-form-btn"
            onclick="setMode('form')">
            <i class="fas fa-list me-2"></i>Form Mode
        </button>
    </div>
</div>

<div id="text-mode-container" class="fade-in mb-4">
    <div class="editor-container">
        <textarea id="yaml-textarea" class="form-control yaml-textarea" rows="22"
            placeholder="Write or paste your YAML configuration here..."></textarea>
    </div>
</div>

<div id="form-mode-container" class="d-none fade-in">
    <div class="d-none" id="schema-fields-manifest">
        <input type="hidden" id="wrong_file_location_deduction" value="0.0">
    </div>
    <div id="json-editor-container" class="mb-4"></div>
</div>
{% endblock %}

{% block scripts %}
<script id="schema-data" type="application/json">{{ schema_json|safe }}</script>
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@2.15.1/dist/jsoneditor.min.js"></script>
<script src="{{ url_for('static', filename='js/editor.js') }}"></script>
{% endblock %}