{% extends "base.html" %}
{% block title %}{{ page.title|default:space.title }} — {{ site_name }}{% endblock %}
{% block extra_head %}
<style>
  .md-body h1 { font-size: 1.75rem; margin-top: 0; }
  .md-body h2 { font-size: 1.25rem; margin-top: 1.5rem; }
  .md-body pre {
    background: #f5f5f5;
    padding: 0.85rem 1rem;
    border-radius: 6px;
    overflow-x: auto;
  }
  .md-body code { font-family: ui-monospace, monospace; font-size: 0.9em; }
  .md-body table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
  .md-body th, .md-body td {
    border: 1px solid #e5e5e5;
    padding: 0.4rem 0.65rem;
    text-align: left;
  }
  .md-body blockquote {
    margin: 1rem 0;
    padding-left: 1rem;
    border-left: 3px solid var(--color-primary);
    color: var(--color-muted);
  }
  .content-meta { font-size: 0.85rem; margin-top: 0.75rem; }
  .content-error {
    border-color: #fcd34d;
    background: #fffbeb;
  }
  .content-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0;
    align-items: center;
  }
  .content-actions form { display: inline; margin: 0; }
  .space-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  @media (min-width: 720px) {
    .space-layout {
      grid-template-columns: 12rem 1fr;
      align-items: start;
    }
  }
  .page-nav {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
  }
  .page-nav li { margin: 0.25rem 0; }
  .page-nav a {
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.95rem;
  }
  .page-nav a:hover,
  .page-nav a.active { color: var(--color-text); font-weight: 600; }
  .visual-thumb {
    max-width: 100%;
    max-height: 8rem;
    border-radius: 6px;
    margin: 0.5rem 0 0;
    object-fit: cover;
  }
  .space-header-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
  }
</style>
{% endblock %}
{% block content %}
  <p class="muted" style="margin:0 0 0.5rem;">
    <a href="{% url 'core:app_home' %}">← Spaces</a>
  </p>
  <div class="space-header-row">
    <div>
      <h1 style="margin-bottom:0.25rem;">{{ space.title }}</h1>
      {% if space.description %}
        <p class="muted" style="margin:0;">{{ space.description }}</p>
      {% endif %}
      {% if space.visual %}
        <p class="content-meta muted" style="margin:0.35rem 0 0;">Visual: {{ space.visual }}</p>
      {% endif %}
    </div>
    <div class="content-actions" style="margin:0;">
      <a class="btn secondary small" href="{% url 'spaces:edit' space.slug %}">Edit space</a>
      <a class="btn secondary small" href="{% url 'spaces:page_new' space.slug %}">New page</a>
    </div>
  </div>

  <div class="content-actions">
    <a class="btn small" href="{% url 'spaces:page_edit' space.slug page.slug|default:'index' %}">Edit page</a>
    {% if page.slug and page.slug != 'index' %}
      <a class="btn secondary small" href="{% url 'spaces:page_copy' space.slug page.slug %}">Copy</a>
      <a class="btn secondary small" href="{% url 'spaces:page_transfer' space.slug page.slug %}">Transfer</a>
      <form method="post" action="{% url 'spaces:page_delete' space.slug page.slug %}"
            onsubmit="return confirm('Delete this page?');">
        {% csrf_token %}
        <button type="submit" class="btn secondary small">Delete</button>
      </form>
    {% else %}
      <a class="btn secondary small" href="{% url 'spaces:page_copy' space.slug 'index' %}">Copy index</a>
    {% endif %}
    {% if forgejo_edit_url %}
      <a class="btn secondary small" href="{{ forgejo_edit_url }}" target="_blank" rel="noopener">Edit in Forgejo</a>
    {% endif %}
    {% if forgejo_blob_url %}
      <a class="btn secondary small" href="{{ forgejo_blob_url }}" target="_blank" rel="noopener">View source</a>
    {% endif %}
    <form method="post" action="{% url 'spaces:refresh' space.slug %}">
      {% csrf_token %}
      <input type="hidden" name="page" value="{{ page.slug|default:'index' }}">
      <button type="submit" class="btn secondary small">Refresh content</button>
    </form>
  </div>

  <div class="space-layout" style="margin-top:1.25rem;">
    <aside class="card" style="margin-top:0;">
      <strong style="font-size:0.9rem;">Pages</strong>
      <ul class="page-nav">
        {% for p in pages %}
          <li>
            <a href="{% url 'spaces:detail' space.slug %}{% if p.slug != 'index' %}?page={{ p.slug }}{% endif %}"
               class="{% if p.slug == page.slug %}active{% endif %}">
              {{ p.title|default:p.slug }}
            </a>
          </li>
        {% empty %}
          <li class="muted" style="font-size:0.9rem;">No local pages yet</li>
        {% endfor %}
      </ul>
    </aside>

    <div>
      {% if page.error %}
        <div class="card content-error" style="margin-top:0;">
          <h2 style="margin-top:0;">Content unavailable</h2>
          <p style="margin-bottom:0;">{{ page.error }}</p>
          {% if space.has_content_binding %}
            <p class="content-meta muted">
              Binding: {{ space.forgejo_owner }}/{{ space.forgejo_repo }}
              · {{ page.path }} @ {{ space.default_branch }}
            </p>
          {% else %}
            <p class="content-meta muted">
              Create or edit a page to write markdown on the content plane.
            </p>
          {% endif %}
        </div>
      {% else %}
        <div class="card md-body" style="margin-top:0;">
          {{ page.html|safe }}
        </div>
        <p class="content-meta muted">
          Source: {{ page.source }} · {{ page.path }}
          {% if space.has_content_binding %}
            · {{ space.forgejo_owner }}/{{ space.forgejo_repo }}@{{ space.default_branch }}
          {% endif %}
        </p>
      {% endif %}
    </div>
  </div>
{% endblock %}