{% extends "base.html" %}

{% block title %}Edit: {{ art.name }}{% endblock %}

{% block content %}
<div class="bbs-header">
    <h1><i class="bi bi-easel-fill"></i> {{ art.name }}</h1>
    <p>
        <code>{{ art.slug }}</code> — {{ art.width }}×{{ art.height }}
    </p>
</div>

<div class="mb-2 d-flex flex-wrap gap-1 align-items-center">
    <a href="{{ url_for('ansi_editor.raw_ansi', art_id=art.id) }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-download"></i> .ans
    </a>
    <a href="{{ url_for('ansi_editor.raw_png', art_id=art.id) }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-image"></i> .png
    </a>
    <div class="dropdown d-inline">
        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
            <i class="bi bi-download"></i> More formats
        </button>
        <ul class="dropdown-menu" style="background-color:var(--theme-bg-dark);border:1px solid var(--theme-primary);">
            <li><a class="dropdown-item" href="{{ url_for('ansi_editor.raw_bin', art_id=art.id) }}">.bin (raw char+attribute)</a></li>
            <li><a class="dropdown-item" href="{{ url_for('ansi_editor.raw_xbin', art_id=art.id) }}">.xb (XBin)</a></li>
            <li><a class="dropdown-item" href="{{ url_for('ansi_editor.raw_pcboard', art_id=art.id) }}">.pcb (PCBoard @X codes)</a></li>
            <li><a class="dropdown-item" href="{{ url_for('ansi_editor.raw_pipe', art_id=art.id) }}">.ren (Renegade/Mystic pipe codes)</a></li>
            <li><a class="dropdown-item" href="{{ url_for('ansi_editor.raw_synchronet', art_id=art.id) }}">.syn (Synchronet Ctrl-A codes)</a></li>
        </ul>
    </div>
    <form method="post" action="{{ url_for('ansi_editor.duplicate', art_id=art.id) }}" style="display:inline;">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button class="btn btn-outline-secondary btn-sm"><i class="bi bi-files"></i> Duplicate</button>
    </form>
    <a href="{{ url_for('ansi_editor.browse', art_id=art.id) }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-save"></i> Save to disk
    </a>
    <a href="{{ url_for('ansi_editor.browse') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-folder2-open"></i> Open from disk
    </a>
    <a href="{{ url_for('ansi_editor.index') }}" class="btn btn-link btn-sm">← Library</a>
</div>

{% set save_url = url_for('ansi_editor.save', art_id=art.id) %}
{% set preview_url = url_for('ansi_editor.preview', art_id=art.id) %}
{% include "ansi_editor/_editor_widget.html" %}

<div class="card mt-3">
    <div class="card-header"><i class="bi bi-arrow-right-square"></i> Apply to a BBS Menu</div>
    <div class="card-body">
        <p class="small text-muted mb-2">Pick a menu and click Apply — this art
            replaces the auto-rendered screen for that menu. Save your work
            first; the rendered ANSI from the last save is what gets applied.</p>
        <form method="post" action="{{ url_for('ansi_editor.apply_to_menu') }}"
              class="row g-2 align-items-end">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="art_id" value="{{ art.id }}">
            <div class="col-md-8">
                <label class="form-label">Target Menu</label>
                <select name="menu_id" class="form-select" required>
                    {% for m in menus %}
                        <option value="{{ m.id }}">
                            {{ m.name }} — {{ m.title }}
                            {% if m.is_default %}(default){% endif %}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-4">
                <button class="btn btn-success w-100"
                        onclick="return confirm('Apply this art as the ANSI screen for the selected menu?')">
                    <i class="bi bi-check2-circle"></i> Apply
                </button>
            </div>
        </form>
    </div>
</div>

<div class="card mt-3">
    <div class="card-header"><i class="bi bi-display"></i> Apply to a Screen Slot</div>
    <div class="card-body">
        <p class="small text-muted mb-2">Set this art as a logon, logoff, or new-user
            screen. Save your work first. This writes directly to the screen slot — no
            paste required.</p>
        <form method="post" action="{{ url_for('ansi_editor.apply_to_screen') }}"
              class="row g-2 align-items-end">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="art_id" value="{{ art.id }}">
            <div class="col-md-8">
                <label class="form-label">Screen Slot</label>
                <select name="slot" class="form-select" required>
                    <option value="welcome">welcome — pre-login / logon screen</option>
                    <option value="goodbye">goodbye — logoff screen</option>
                    <option value="newuser">newuser — new user registration screen</option>
                </select>
            </div>
            <div class="col-md-4">
                <button class="btn btn-info w-100"
                        onclick="return confirm('Apply this art to the selected screen slot?')">
                    <i class="bi bi-check2-circle"></i> Apply
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}