{% extends "base.html" %}

{% block title %}{{ document }} — Terms Cockpit{% endblock %}

{% block breadcrumb %}
{% set parts = document.split('/') %}
<span class="breadcrumb">
  <span class="bc-sep">›</span>
  <a href="{{ url_for('views.index', repo=repo) }}">Services</a>
  <span class="bc-sep">›</span>
  <a href="{{ url_for('views.service', repo=repo, service=parts[0]) }}">{{ parts[0] }}</a>
  <span class="bc-sep">›</span>
  <span class="bc-current">{{ parts[1] if parts|length > 1 else document }}</span>
</span>
{% endblock %}

{% block content %}
<section class="page-header compact">
  <div class="page-header-row">
    <h1>{{ document.split('/')[-1] }}</h1>
    <div class="toolbar">
      <label class="toggle">
        <input type="checkbox" id="toggle-readability">
        <span class="toggle-label">Readability</span>
      </label>
      <a class="btn btn-secondary btn-sm" href="{{ url_for('views.versions', repo=repo, document=document) }}">
        📊 History
      </a>
      <a class="btn btn-primary btn-sm" href="{{ url_for('views.lexglue', repo=repo, document=document) }}">
        ⚖ LexGlue
      </a>
    </div>
  </div>
</section>

<!-- Change history bar -->
<section class="history-bar" id="history-bar">
  <div class="history-header">
    <span id="history-summary">Loading history…</span>
    <button class="history-toggle-btn" id="history-toggle-btn" type="button" disabled>
      <span id="history-active-label">—</span>
      <span class="history-toggle-arrow">▾</span>
    </button>
  </div>
  <div class="history-list-wrapper hidden" id="history-list-wrapper">
    <div class="history-list" id="history-list"></div>
  </div>
</section>

<div class="document-view">
  <div id="html-view">
    <p class="loading">Loading document…</p>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  document.addEventListener("DOMContentLoaded", () => {
    App.document.init("{{ document }}");
  });
</script>
{% endblock %}