{% extends "ui/page.html" %}

{% load i18n static ui %}

{% block title %}{% if association.title %}{{ association.title }}{% else %}{{ association.target.url }}{% endif %}{% endblock %}

{% block button_bar_class %}d-none{% endblock %}

{% block page_head %}
  {{ block.super}}
<meta property="og:title" content="{% if association.title %}{{ association.title }}{% else %}{{ association.target.url }}{% endif %}">
{% if association.description %}
<meta property="og:description" content="{{ association.description|truncatechars:125 }}">
{% endif %}
<meta property="og:image" content="{{ og_card_url }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="{{ share_url }}">
<meta property="og:type" content="website">
<meta property="og:site_name" content="{{ SITE_TITLE }}">
{% endblock %}

{% block page_body %}
  <div id="ViewAssociationView" class="container pb-3">
    <p class="display-3 mt-3 mb-0 text-center">
      {% if association.title %}
        {{ association.title }}
      {% else %}
        {{ association.target.url }}
      {% endif %}
    </p>
    <p class="lead mb-3 text-center ui-width-reference">
      <span class="text-muted">
        {% blocktranslate with created_at=association.created_at %}Saved on {{ created_at }}{% endblocktranslate %}
      </span>
      <br>
      <a href="{{ association.target.url }}" target="_blank" rel="noopener noreferrer">
        {% translate 'View original' %} <i class="bi bi-box-arrow-up-right"></i>
      </a>
    </p>
    {% if show_controls %}
      <div class="d-flex justify-content-center mb-3">
        <div class="btn-group ui-controls" role="group">
          <a
            class="btn btn-primary btn-sm"
            href="{% url 'ui.associations.edit' pk=association.pk %}"
            role="button"
          >
            <i class="bi bi-pencil"></i> {% translate 'Edit' %}
          </a>
          <a
            class="btn btn-secondary btn-sm ui-noscript-hide ui-share-button"
            href="{{ share_url }}"
            role="button"
          >
            <i class="bi bi-box-arrow-up"></i> {% translate 'Share' %}
          </a>
          <a
            class="btn btn-secondary btn-sm ui-noscript-hide ui-pasteboard-link"
            href="{{ share_url }}"
            role="button"
          >
            <i class="bi bi-clipboard"></i> {% translate 'Copy share link' %}
          </a>
          <a
            class="btn btn-secondary btn-sm ui-noscript-show"
            href="{{ share_url }}"
            rel="noopener noreferrer"
            target="_blank"
          >
            <i class="bi bi-link-45deg"></i> {% translate 'Share link' %}
          </a>
        </div>
      </div>
    {% endif %}
    {% if association.description %}
      <div class="row mb-3">
        <div class="col-12 col-lg-6 offset-lg-3">
          {{ association.description }}
        </div>
      </div>
    {% endif %}
    {% if association.target.is_youtube_video %}
      <div class="ui-embed">
        {% if not request.user.is_anonymous and request.user.settings.auto_load_embeds %}
          {% include "ui/saves/partials/embed.html" with save=association.target %}
        {% else %}
          <div class="alert alert-warning mb-0 ui-noscript-hide">
            <h4 class="alert-heading">{% translate 'Heads up!' %}</h4>
            <p class="lead">
              {% blocktranslate %}
                The link contains embeddable content. Loading it means that
                you accept cookies from the site - YouTube.
              {% endblocktranslate %}
            </p>
            <hr>
            <p class="mb-0">
              <button
                class="btn btn-primary btn-sm"
                hx-post="{% url 'ui.saves.embed' %}"
                hx-swap="innerHTML"
                hx-target=".ui-embed"
                hx-vars='{"pk":"{{ association.target.pk }}"}'
                role="button"
              >
                <i class="bi bi-eye"></i>  {% translate 'Load content' %}
              </button>
            </p>
          </div>
        {% endif %}
      </div>
    {% endif %}
  </div>
{% endblock %}