{% extends "base.html" %}
{% import "_icons.html" as icon %}
{% block title %}{{ document.name }} · kopi{% endblock %}
{% block content %}
{% set raw_url = url_for('console.app_file', name=app.name, folder=folder, relative=relative) %}
<nav class="crumbs-nav" aria-label="Breadcrumb">
  <ol>
    <li><a href="{{ url_for('console.app_page', name=app.name) }}">{{ app.name }}</a></li>
    <li><a href="{{ url_for('console.browse_page', name=app.name, folder=folder) }}">{{ folder_label }}</a></li>
    {% if parent %}<li><a href="{{ url_for('console.browse_page', name=app.name, folder=folder, **{'in': parent}) }}">{{ parent }}</a></li>{% endif %}
    <li aria-current="page">{{ document.name }}</li>
  </ol>
</nav>

<div class="page-head">
  <div class="heading">
    <h1 class="document-title">{{ document.name }}</h1>
    <p class="meta document-meta">{{ document.size }} · changed {{ document.modified }}</p>
  </div>
  <div class="actions">
    <a class="button text" href="{{ url_for('console.browse_page', name=app.name, folder=folder, **({'in': parent} if parent else {})) }}">{{ icon.back() }}Back to {% if parent %}{{ parent }}{% else %}{{ folder_label }}{% endif %}</a>
    {% if readers %}
    <form method="post" action="{{ url_for('console.view_copy', name=app.name, folder=folder, relative=relative) }}">
      <input type="hidden" name="token" value="{{ token }}">
      <button class="tonal">{{ icon.copy_in() }}Copy to documents<span class="visually-hidden">, for {{ readers | join(", ") }}</span></button>
    </form>
    {% endif %}
    <form method="post" action="{{ url_for('console.view_open', name=app.name, folder=folder, relative=relative) }}">
      <input type="hidden" name="token" value="{{ token }}">
      <button class="filled">{{ icon.open_new() }}Open file<span class="visually-hidden"> in its own program</span></button>
    </form>
    <a class="button text" href="{{ raw_url }}"{% if document.kind not in ["docx", "slides", "other"] %} target="_blank" rel="noopener"{% endif %}>{% if document.kind in ["docx", "slides", "other"] %}Download{% else %}Open in a new tab{% endif %}</a>
  </div>
</div>

{% if document.cut %}<p class="notice">This file is long, so only its first part is shown here. Open it on its own to see all of it.</p>{% endif %}

{% if document.kind == "markdown" %}
<article class="card document prose">{{ document.html | safe }}</article>
{% elif document.kind == "diff" %}
<p class="supporting diff-key"><span class="diff-swatch diff-removed">− Before</span> <span class="diff-swatch diff-added">+ After</span> <mark>changed words</mark> highlighted</p>
<div class="card document diff">
  {%- for row in document.rows %}
  {%- if row.kind == "hunk" %}
  <div class="diff-break" role="separator"><span class="visually-hidden">Next change</span></div>
  {%- else %}
  <div class="diff-line diff-{{ row.kind }}">
    <span class="diff-sign" aria-hidden="true">{% if row.kind == "added" %}+{% elif row.kind == "removed" %}−{% endif %}</span>
    <span class="diff-text">{% if row.kind == "added" %}<span class="visually-hidden">After: </span>{% elif row.kind == "removed" %}<span class="visually-hidden">Before: </span>{% endif %}{% for piece in row.pieces %}{% if not loop.first %} {% endif %}{% if piece.changed %}<mark>{{ piece.text }}</mark>{% else %}{{ piece.text }}{% endif %}{% endfor %}</span>
  </div>
  {%- endif %}
  {%- else %}
  <p>The edit changed nothing.</p>
  {%- endfor %}
</div>
{% elif document.kind in ["text", "json", "docx"] %}
<pre class="card document plain">{{ document.text }}</pre>
{% elif document.kind == "pdf" %}
<iframe class="document-frame" src="{{ raw_url }}" title="{{ document.name }}"></iframe>
{% elif document.kind == "slides" and document.has_pdf %}
<iframe class="document-frame" src="{{ url_for('console.app_file', name=app.name, folder=folder, relative=pdf_relative) }}" title="Slides of {{ document.name }}"></iframe>
{% elif document.kind == "slides" %}
<div class="empty">
  <h2>No PDF was made for this deck</h2>
  <p class="supporting">Open the file to see the slides, or run slides again without "no-pdf".</p>
</div>
{% elif document.kind == "image" %}
<div class="card document"><img src="{{ raw_url }}" alt="{{ document.name }}"></div>
{% else %}
<div class="empty">
  <h2>No preview for this kind of file</h2>
  <p class="supporting">Download it, or open its folder.</p>
</div>
{% endif %}
{% endblock %}