{% extends "__builtins/base.html" %}
{% import "__builtins/macros.html" as macros %}

{% block head %}
<meta property="og:url" content="{{ base_url }}scraps/{{ scrap.html_file_name }}" />
{% if scrap.thumbnail %}
    <meta property="og:image" content="{{ scrap.thumbnail }}" />
    <meta name="twitter:image" content="{{ scrap.thumbnail }}" />
{% endif %}
{% endblock %}

{% block main %}
    <div class="scrap">
        {% if scrap.ctx %}
          <h3 class="context">{{ scrap.ctx }}<span>&#47;</span></h2>
        {% endif %}
        <h1 class="title">{{ scrap.title }}</h1>
        {% if scrap.commited_ts %}
            <p class="commited-date">
                commited date: {{ scrap.commited_ts | date(format="%Y-%m-%d", timezone=timezone) }}
            </p>
        {% endif %}
        <div class="content">
            {% for element in scrap.content.elements %}{% if element.raw %}{{ element.raw | safe }}{% elif element.autolink %}{{ macros::ogp_card(autolink=element.autolink) }}{% endif %}{% endfor %}
        </div>
    </div>
    {{ macros::scrap_links(scraps = linked_scraps) }}
{% endblock %}
{% block script %}
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const ogpCards = document.querySelectorAll('.ogp-card');

    ogpCards.forEach(async (card) => {
      const url = card.dataset.url;

      try {
        const proxyUrl = 'https://corsproxy.io/?url=';
        const response = await fetch(proxyUrl + url);
        const html = await response.text();
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');

        const title = doc.querySelector('meta[property="og:title"]')?.content ||
          doc.querySelector('title')?.textContent ||
          'No title';
        card.querySelector('.ogp-title').textContent = title;

        const description = doc.querySelector('meta[property="og:description"]')?.content ||
          doc.querySelector('meta[name="description"]')?.content ||
          'No description';
        card.querySelector('.ogp-description').textContent = description;

        const image = doc.querySelector('meta[property="og:image"]')?.content;
        if (image) {
          const imageUrl = image.startsWith('/')
            ? `https://${card.dataset.host}/${image}`
            : image;
          card.querySelector('.ogp-image').src = imageUrl;
        } else {
          card.querySelector('.ogp-image').remove();
        }
      } catch (error) {
        console.error('Failed to fetch OGP data:', error);
      }
    });
  });
</script>
{% endblock %}