{% extends "base.html" %}

{% block title %}{{ plan_file.name }} - {{ project.name }} - flanner{% endblock %}

{% block content %}
<div class="plan-view">
    <nav class="breadcrumb" aria-label="Breadcrumb"><a href="/">~</a><span class="crumb-sep"> / </span><a href="/projects">projects</a><span class="crumb-sep"> / </span><a href="/projects/{{ project.id }}">{{ project.name }}</a><span class="crumb-sep"> / </span><span class="crumb-here">{{ plan_file.name }}_v{{ version.version }}.md</span></nav>
    <header class="page-header">
        <div>
            <h1>{{ plan_file.name }}</h1>
            <p class="page-subtitle">
                in <a href="/projects/{{ project.id }}">{{ project.name }}</a>
            </p>
        </div>
        <div class="header-actions">
            <a href="/plans/{{ plan_file.id }}/edit" class="btn btn-primary">
                Edit
            </a>
            <a href="/plans/{{ plan_file.id }}/history" class="btn btn-secondary">
                History
            </a>
        </div>
    </header>

    <!-- Version Info -->
    <div class="version-bar">
        <div class="version-info">
            <span class="version-label">Version:</span>
            <select id="version-selector" class="version-select" onchange="changeVersion(this.value)">
                {% for v in all_versions %}
                <option value="{{ v.version }}" {% if v.version == version.version %}selected{% endif %}>
                    v{{ v.version }}
                    {% if v.version == plan_file.current_version %}(latest){% endif %}
                </option>
                {% endfor %}
            </select>
        </div>
        <div class="version-meta">
            <span class="meta-item">
                {{ version.created_by }}
            </span>
            <span class="meta-item">
                {{ version.created_at|relative_time if version.created_at }}
            </span>
            {% if version.notes %}
            <span class="meta-item" title="{{ version.notes }}">
                {{ version.notes[:50] }}{% if version.notes|length > 50 %}...{% endif %}
            </span>
            {% endif %}
        </div>
    </div>

    <!-- Frontmatter (collapsible) -->
    <details class="frontmatter-details">
        <summary>frontmatter</summary>
        <pre class="frontmatter-code"><code>---
{% for key, value in frontmatter.items() %}{{ key }}: {{ value }}
{% endfor %}---</code></pre>
    </details>

    <!-- Main Content -->
    <div class="content-section">
        {% if render_capped %}
        <div class="alert alert-info">
            This plan is {{ "{:,}".format(content_chars) }} characters, past the
            1,000,000-character rendering limit, so it is shown as plain text.
        </div>
        <pre class="raw-content">{{ content }}</pre>
        {% else %}
        <div class="markdown-content">
            {{ content_html|safe }}
        </div>
        {% endif %}
    </div>

    <!-- File Path Info -->
    <div class="file-info">
        <span class="info-label">File Location:</span>
        <code>{{ version.file_path }}</code>
    </div>
</div>

<script>
function changeVersion(versionNum) {
    window.location.href = '/plans/{{ plan_file.id }}?version=' + versionNum;
}
</script>
{% endblock %}