neiam /bismuth

{% extends "root.html" %}

{% block width %}max-w-5xl{% endblock %}

{% block content %}
{% set card = base ~ "/s/" ~ snippet.slug %}
{% set embed_url = base ~ "/e/" ~ snippet.slug %}
<div class="space-y-6">
  <div class="flex flex-wrap items-end justify-between gap-3">
    <div>
      <p class="font-mono text-xs uppercase tracking-[0.25em] text-accent">snippet · {{ snippet.slug }}</p>
      <h1 class="text-2xl font-bold break-all">{{ snippet.title or "Untitled" }}</h1>
    </div>
    <div class="flex flex-wrap gap-2">
      <a class="btn btn-sm btn-outline" href="/s/{{ snippet.slug }}/card.png?download=1" hx-boost="false"><i class="fas fa-image fa-fw"></i> PNG</a>
      <a class="btn btn-sm btn-outline" href="/s/{{ snippet.slug }}/card.svg?download=1" hx-boost="false"><i class="fas fa-bezier-curve fa-fw"></i> SVG</a>
      {% if is_owner %}
        <a class="btn btn-sm btn-primary" href="/snippets/{{ snippet.slug }}/edit"><i class="fas fa-pen fa-fw"></i> Edit</a>
        <form method="post" action="/snippets/{{ snippet.slug }}/delete" hx-boost="false"
              onsubmit="return confirm('Delete this snippet? Embeds of it will stop working.')">
          <button class="btn btn-sm btn-ghost text-error"><i class="fas fa-trash fa-fw"></i></button>
        </form>
      {% endif %}
    </div>
  </div>

  <div class="rounded-box border border-base-300 bg-base-200 p-3 overflow-auto [&_svg]:max-w-full [&_svg]:h-auto [&_svg]:mx-auto [&_svg]:block">
    {{ card_svg|safe }}
  </div>

  <div class="space-y-4">
    <h2 class="text-lg font-semibold">Use it elsewhere</h2>

    {% macro snippet_box(label, hint, text) %}
    <div class="space-y-1" data-copy>
      <div class="flex items-center justify-between gap-2">
        <span class="text-xs uppercase tracking-wider opacity-70">{{ label }}</span>
        <button type="button" class="btn btn-xs btn-ghost"
                onclick="navigator.clipboard.writeText(this.closest('[data-copy]').querySelector('pre').innerText).then(() => window.toast && toast('Copied', {kind: 'success', ttl: 1500}))">
          <i class="fas fa-copy fa-fw"></i> Copy
        </button>
      </div>
      <pre class="bg-base-300 rounded-box p-3 text-xs overflow-x-auto whitespace-pre-wrap break-all"><code>{{ text }}</code></pre>
      {% if hint %}<p class="text-xs opacity-60">{{ hint }}</p>{% endif %}
    </div>
    {% endmacro %}

    {{ snippet_box("Presentato slide (live, follows the deck's scheme)",
                   "Paste into a deck's markdown. The embed listens for the deck's theme changes, the same handshake Diogramos uses.",
                   '<iframe src="' ~ embed_url ~ '?bg=transparent" style="width:100%;height:540px;border:0;color-scheme:normal" loading="lazy"></iframe>') }}

    {{ snippet_box("Presentato background slide",
                   "",
                   '<!-- .slide: data-background-iframe="' ~ embed_url ~ '" -->') }}

    {{ snippet_box("Markdown image",
                   "Static PNG. Add ?theme=, ?chrome=, ?hl=, ?bg=transparent or ?scale= to restyle without editing.",
                   '![' ~ (snippet.title or "code") ~ '](' ~ card ~ '/card.png)') }}

    {{ snippet_box("HTML iframe", "",
                   '<iframe src="' ~ embed_url ~ '" style="width:100%;height:480px;border:0;color-scheme:normal" loading="lazy"></iframe>') }}
  </div>
</div>
{% endblock %}