{% extends "base.html" %}

{% block title %}v{{ version.version }} of {{ app.name }}{% endblock %}

{% block crumbs %}
{% import "_app_crumbs.html" as app_crumbs with context %}
{{ app_crumbs.nav(request=request, app=app) }}
{% endblock %}

{% block extra_head %}
<style>
.datasette-app-revision-empty-value {
  color: rgba(17, 26, 53, 0.5);
}
</style>
{% if html_changed %}
{{ codemirror_assets|safe }}
{% endif %}
{% endblock %}

{% block content %}
<div class="datasette-app-view-header">
  <h1>v{{ version.version }} of {{ app.name }}</h1>
  <div class="datasette-app-actions">
    <a class="datasette-app-button" href="{{ urls.path('/-/apps/' ~ app.id ~ '/edit') }}">Edit app</a>
    <a class="datasette-app-button" href="{{ urls.path(app.path) }}">View app</a>
  </div>
</div>

<p class="datasette-app-revision-meta">
  Created <time datetime="{{ version.created_at }}">{{ version.created_at[:19]|replace("T", " ") }}</time>
  {% if previous %}
    compared with v{{ previous.version }}
  {% else %}
    compared with an empty file
  {% endif %}
</p>

{% if revision_changes %}
<section class="datasette-app-revision-section">
  <h2>Changes</h2>
  <dl class="datasette-app-revision-changes">
    {% for change in revision_changes %}
      <div>
        <dt>{{ change.label }}</dt>
        <dd>
          <span>
            <span class="datasette-app-revision-change-label">Before</span>
            <span class="datasette-app-revision-change-value{% if change.before.empty %} datasette-app-revision-empty-value{% endif %}">{{ change.before.text }}</span>
          </span>
          <span>
            <span class="datasette-app-revision-change-label">After</span>
            <span class="datasette-app-revision-change-value{% if change.after.empty %} datasette-app-revision-empty-value{% endif %}">{{ change.after.text }}</span>
          </span>
        </dd>
      </div>
    {% endfor %}
  </dl>
</section>
{% endif %}

{% if html_changed %}
<section class="datasette-app-revision-section">
  <h2>HTML diff</h2>
  <pre class="datasette-app-diff">{%- for line in diff_lines -%}<span{% if line.class %} class="{{ line.class }}"{% endif %}>{{ line.text }}</span>{%- endfor -%}</pre>
</section>

<section class="datasette-app-revision-section">
  <div class="datasette-app-revision-source-header">
    <h2>Full HTML</h2>
    <button class="datasette-app-button" type="button" data-copy-source="revision-html-source">Copy to clipboard</button>
  </div>
  <textarea class="datasette-app-source" id="revision-html-source" readonly>{{ version.html }}</textarea>
</section>

<script>
document.addEventListener("click", async function(event) {
  var button = event.target.closest("[data-copy-source]");
  if (!button) {
    return;
  }
  var source = document.getElementById(button.getAttribute("data-copy-source"));
  if (!source) {
    return;
  }
  var text = typeof source.value == "string" ? source.value : source.textContent;
  try {
    await navigator.clipboard.writeText(text);
  } catch (error) {
    var textarea = document.createElement("textarea");
    textarea.value = text;
    textarea.setAttribute("readonly", "");
    textarea.style.position = "fixed";
    textarea.style.left = "-9999px";
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    textarea.remove();
  }
  button.textContent = "Copied";
  window.setTimeout(function() {
    button.textContent = "Copy to clipboard";
  }, 2000);
});
</script>
{% endif %}
{% endblock %}