{% extends "pages/base.html" %}
{% load i18n %}
{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="row">
  <div class="col-12 col-lg-3 mt-4 mt-lg-0 order-2 order-lg-1">
    <div class="reader-sidebar">
      <nav class="toc">
        <h4>{% trans "QR Links" %}</h4>
        <ul class="list-unstyled">
          {% for entry in sidebar_entries %}
            <li class="mb-2">
              <a
                href="{% url 'links:qr-redirect-public' entry.slug %}"
                class="{% if entry.pk == qr_entry.pk %}fw-semibold{% endif %}"
              >
                {{ entry.title|default:entry.slug }}
              </a>
            </li>
          {% empty %}
            <li class="text-muted">{% trans "No public QR links available." %}</li>
          {% endfor %}
        </ul>
      </nav>
      <div class="reader-qr-card mt-4">
        <div class="reader-qr-image">
          <img
            src="{{ qr_data_uri }}"
            alt="{% trans 'QR code linking to this redirect' %}"
            class="img-fluid"
          >
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 col-lg-9 order-1 order-lg-2">
    <div class="markdown-body" id="reader-content">
      <h1>{{ qr_entry.title|default:qr_entry.slug }}</h1>
      {% if qr_entry.text_above %}
        <p class="lead">{{ qr_entry.text_above|linebreaksbr }}</p>
      {% endif %}
      <div class="ratio ratio-16x9">
        <iframe
          src="{{ iframe_url }}"
          title="{{ qr_entry.title|default:qr_entry.slug }}"
          loading="lazy"
        ></iframe>
      </div>
      <p class="mt-3">
        <a href="{{ iframe_url }}" target="_blank" rel="noopener noreferrer">
          {% trans "Open in a new tab" %}
        </a>
      </p>
      {% if qr_entry.text_below %}
        <div class="mt-4">{{ qr_entry.text_below|linebreaksbr }}</div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}