{% extends 'components/shell.html' %}

{% from 'components/timestamp.html' import timestamp %}
{% from 'components/links.html' import kemono_link, local_link %}
{% from 'components/fancy_image.html' import fancy_image, background_image %}
{% from 'components/image_link.html' import image_link %}
{% from 'components/ads.html' import middle_ad, slider_ad %}

{% set paysite = g.paysites[props.service] %}
{% set post_title = post.title if post.title else 'Untitled' %}
{% set artist_name = props.artist.name if props.artist.name else props.user %}
{% set page_title = "\"" ~ post_title ~ "\" by " ~ props.artist.name ~ " from " ~ paysite.title ~ " | " ~ g.site_name if props.artist else post_title ~ " | " ~ g.site_name %}
{% set user_link = g.freesites.kemono.user.profile(post.service, post.user) %}
{% set user_icon = g.freesites.kemono.user.icon(post.service, post.user) %}
{% set user_banner = g.freesites.kemono.user.banner(post.service, post.user) %}
{% set post_link = g.freesites.kemono.post.link(post.service, post.user, post.id) %}

{% block title %}
  <title>
    {{ page_title }}
  </title>
{% endblock title %}

{% block meta %}
  <meta name="service" content="{{ post.service }}">
  <meta name="id" content="{{ post.id }}">
  <meta name="user" content="{{ post.user }}">
  {% if post.published %}
    <meta name="published" content="{{ post.published }}">
  {% endif %}
  <link rel="canonical" href="{{ g.canonical_url }}">
{% endblock meta %}

{% block opengraph %}
  <meta property="og:title" content="{{ page_title }}">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="{{ g.site_name }}">
  <meta property="og:image" content="{{  g.icons_prepend | default(g.origin) }}/icons/{{ post.service }}/{{ post.user }}">
  <meta property="og:url" content="{{ g.canonical_url }}">
{% endblock opengraph %}

{% block content %}
{{ slider_ad() }}
<section class="site-section site-section--post" id="page">
  {% if post %}
    <nav class="post__nav-links">
      <ul class="post__nav-list">
        {% if post.prev %}
          <li class="post__nav-item">
            <a
              class="post__nav-link prev"
              href="/{{ post.service }}/user/{{ post.user }}/post/{{ post.prev }}"
            >
              ‹ previous
            </a>
          </li>
        {% else %}
          <li class="post__nav-item subtitle">‹ previous</li>
        {% endif %}

        {% if post.next %}
          <li class="post__nav-item">
            <a
              class="post__nav-link next"
              href="/{{ post.service }}/user/{{ post.user }}/post/{{ post.next }}"
            >
              next ›
            </a>
          </li>
        {% else %}
          <li class="post__nav-item subtitle">next ›</li>
        {% endif %}
      </ul>
    </nav>

    <header class="post__header">
      <div class="post__user">
        {{ background_image(user_banner) }}
        {{ image_link(
          url=user_link,
          src=user_icon,
          is_lazy=false,
          class_name='post__user-profile'
        ) }}
        <div>
          <a
            class="post__user-name"
            href="{{ user_link }}">
            {{ props.artist.name if props.artist else g.artists_or_creators[:-1] ~ "'s page"}}
          </a>
        </div>
      </div>
      <div class="post__info">
        <h1 class="post__title">
          {% if post_link_in_title %}
            <a href="/{{ post.service }}/user/{{ post.user }}/post/{{ post.id }}" target="_blank">
              <span>{{ post_title }}</span> <span>({{ paysite.title }})</span>
            </a>
          {% else %}
            <span>{{ post_title }}</span> <span>({{ paysite.title }})</span>
          {% endif %}
        </h1>
        {% if post.published %}
          <div class="post__published" style="margin: 0.125rem 0;">
            <div style="width: 89px; display: inline-block;">Published:</div> {{ post.published|string|replace("00:00:00", "") }}
           </div>
        {% endif %}
        {% if post.edited and post.edited != post.published %}
          <div class="post__edited" style="margin: 0.125rem 0;">
            <div style="width: 89px; display: inline-block;">Edited:</div> {{ post.edited|string|replace("00:00:00", "") }}
           </div>
        {% endif %}
        <div class="post__added" style="margin: 0.125rem 0;">
          {% if props.revisions|length > 1 %}
            <div style="width: 85px; display: inline-block; margin: 0;">Imported:</div>
            <span class="post__revisions" title="View past versions of this page">
              <select id="post-revision-selection" style="text-align-last: left;">
                {% for i, revision in props.revisions %}
                    <option value="{{ revision.revision_id }}" {% if revision.revision_id == post.revision_id %} selected {% endif %}>
                      {{ (revision.added|string)[:7] }} <{{ i+1 }}> [{{ revision.revision_id or "current" }}]
                    </option>
                {% endfor %}
              </select>
            </span>
          {% else %}
              <span> <div style="width: 89px; display: inline-block;">Imported: </div> {{ (post.added|string)[:7] }}</span>
          {% endif %}
        </div>
        {% if post.tags %}
          <section id="post-tags">
            <span id="label">Tags: </span>
            <div>
              {% for tag in post.tags %}
                <a href="/{{ post.service }}/user/{{ post.user }}/?tag={{ tag|quote_plus }}">{{ tag }}</a>
              {% endfor %}
            </div>
          </section>
        {% endif %}
        <div class="post__actions">
          {% if props.flagged %}
            <span
              class="post__flag post__flag--flagged"
            >
              <span class="post__flag-icon">⚑</span>
              <span>Flagged</span>
            </span>
          {% else %}
            <button
              class="post__flag"
              type="button"
            >
              <span class="post__flag-icon">⚑</span>
              <span>Flag</span>
            </button>
          {% endif %}
        </div>
      </div>
    </header>

    <div class="post__body">
      {{ middle_ad() }}
      {{ post_view(post, result_attachments, result_previews) }}
    </div>

    <footer class="post__footer">
      <h2 class="site-section__subheading">Comments</h2>
      {# TODO: comment filters #}
      <div class="post__comments {{ 'post__comments--no-comments' if not comments }}">
        {% for comment in comments %}
          {% set is_user = comment.commenter == post.user %}
          <article
            class="comment {{ 'comment--user' if is_user }}"
            id="{{ comment.id }}"
          >
            <header class="comment__header">
              {% if is_user %}

                {% call kemono_link(comment.id, class_name="comment__icon") %}
                  {{ fancy_image( g.icons_prepend ~ '/icons/' ~ post.service ~ '/' ~ post.user) }}
                {% endcall %}

                {% call local_link(comment.id, class_name="comment__name") %}
                  {{ props.artist.name if props.artist else g.artists_or_creators[:-1] }}
                {% endcall %}

              {% else %}
                {{ local_link(comment.id, comment.commenter_name or 'Anonymous' , "comment__name") }}
              {% endif %}

              {% if comment.revisions %}
                <span class="comment-has-revisions fancy-link" data-micromodal-trigger="comment-revisions-{{comment.id}}">(<a class="fancy-link" href="#{{ comment.id }}">edited</a>)</span>
                <div class="comment-revisions-dialog" id="comment-revisions-{{comment.id}}">
                  <div tabindex="-1" data-micromodal-close>
                    <div role="dialog" aria-modal="true" aria-labelledby="comment-revisions-{{comment.id}}-title">
                      <section>
                        <header>
                          <h2 id="comment-revisions-{{comment.id}}-title">Comment edits</h2>

                          <button data-micromodal-close></button>
                        </header>

                        <main id="comment-revisions-{{comment.id}}-content">
                          {% for revision in comment.revisions + [comment] %}
                            <article id="comment-{{comment.id}}-revision-{{revision.id}}">
                              <span class="timestamp">{{(revision.published or revision.added)|simple_datetime}}</span>
                              <span class="prose">{{revision.content}}</span>
                            </article>
                          {% endfor %}
                        </main>
                      </section>
                    </div>
                  </div>
                </div>
              {% endif %}
            </header>
            <section class="comment__body">
              {% if comment.parent_id %}
                <div class="comment__reply">
                  <a href="#{{ comment.parent_id }}">
                    >>{{comment.parent_id}}
                  </a>
                </div>
              {% endif %}
              <p class="comment__message">
                {{ comment.content }}
              </p>
            </section>
            <footer class="comment__footer">
              {{ timestamp(comment.published) }}
            </footer>
          </article>
        {% else %}
          <p class="subtitle">No comments found for this post.</p>
        {% endfor %}
      </div>

    </footer>

  {% else %}
    <h1 class="subtitle no-posts">Nobody here but us chickens!</h1>
  {% endif %}
</section>
{% endblock content %}

{% block components %}
  <button
    class="post__fav"
    type="button"
  >
    <span class="post__fav-icon">☆</span>
    <span>Favorite</span>
  </button>
  <span
    class="post__flag post__flag--flagged"
  >
    <span>⚑</span>
    <span>Flagged</span>
  </span>

  <span class="post__revisions"><span>Revisions</span></span>
{% endblock components %}

{% macro post_view(post, attachments, previews) %}
  {% if post.service == 'dlsite' and post.attachments|length > 1 %}
    <p class="subtitle">
      This DLsite post was received as a split set of multiple files due to file size. Download all the files, then open the .exe file to compile them into a single one.
    </p>
  {% endif %}

  {% if videos %}
    <h2>Videos</h2>
    <script>window.videoAds = {{ g.video_ad|safe }};</script>
    <ul style="text-align: center;list-style-type: none;">
      {% for video in videos %}
        <li>
          <summary>{{ video.name }}</summary>
          {% if video.caption %}
            <summary>{{video.caption}}</summary>
          {% endif %}
          <video
            id="kemono-player{{video.index}}"
            controls
            playsinline
            preload="none"
            class="post__video"
          >
            <source
              src="{{ video.server or '' }}/data{{ video.path }}"
              type="video/{{ video.extension[1:] }}"
            />
          </video>
        </li>
      {% endfor %}
    </ul>
  {% endif %}

  {% if attachments %}
    <h2>Downloads</h2>
    <ul class="post__attachments">
      {% for attachment in attachments %}
        <li class="post__attachment">
          <a
            class="post__attachment-link"
            href="{{ attachment.server or '' }}/data{{ attachment.path }}?f={{ attachment.name|urlencode }}"
            download="{{ attachment.name|urlencode }}"
          >
            Download {{ attachment.name }}
          </a>
          {% if archives_enabled and ( attachment.extension in [".zip", ".rar", ".7z"] or attachment.name_extension in [".zip", ".rar", ".7z"] )%}
            (<a href="/posts/archives/{{ attachment.stem }}">browse »</a>)
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}

  {% if post.incomplete_rewards %}
    <div class="post__warning" style="color: red;">
      <pre>{{ post.incomplete_rewards|safe }}</pre>
    </div>
  {% endif %}

  {% if post.poll %}
    <h2>Poll</h2>

    <article id="poll">
      <div id="poll-summary">
        <h4>{{post.poll.title}}</h4>
        {% if post.poll.description %}
          <h6>{{post.poll.description}}</h6>
        {% endif %}
      </div>
      <ul>
        {% for choice in post.poll.choices %}
          {% set pct = choice.votes / (post.poll.total_votes or 1) * 100 %}
          <li title="{{'%.2f' % pct}}%">
            <span class="choice-text">{{choice.text}}</span>
            <span class="choice-votes">{{choice.votes}}</span>
            <span class="choice-fill" style="width: {{pct}}%"></span>
          </li>
        {% endfor %}
      </ul>
      <footer>
        <ul>
          <li id="start" title="{{post.poll.created_at}}">{{post.poll.created_at|simple_date}}</li>
        {% if post.poll.closes_at %}
          <li id="end" title="{{post.poll.closes_at}}">—{{post.poll.closes_at|simple_date}}</li>
        {% endif %}
        {% if post.poll.allow_multiple %}
          <span class="sep"></span><li id="multiple-choice">multiple choice</li>
        {% endif %}
        <span class="sep"></span><li id="vote-count">{{post.poll.total_votes}} votes</li>
      </footer>
    </article>
    <span style="display:none;">{{post.poll}}</span>
  {% endif %}

  {% if post.content %}
    <h2>Content</h2>
    <div class="post__content">
      {% if props.service == "subscribestar" -%}
        <div>
      {%- endif %}
      {% if props.service == 'fantia' or props.service == 'onlyfans' or props.service == 'fansly' or props.service == 'candfans' -%}
        <pre>{{ post.content|safe }}</pre>
      {% else -%}
        {{ post.content|safe }}
      {%- endif %}
    </div>
  {% endif %}


  {% if previews %}
    <h2>Files</h2>
    <div class="post__files">
      {% for preview in previews %}
        {% if preview.type == 'thumbnail' %}
          <div class="post__thumbnail">
            <figure>
              <a
                class="fileThumb"
                href="{{ preview.server or '' }}/data{{ preview.path }}?f={{ preview.name|urlencode }}"
                download="{{ preview.name|urlencode }}"
              >
              {# TODO: move backup image logic to the script #}
                <img
                  data-src="{{ g.thumbnails_prepend }}/thumbnail/data{{ preview.path }}"
                  src="{{ g.thumbnails_prepend }}/thumbnail/data{{ preview.path }}"
                  loading="lazy"
                >
              </a>
              {% if preview.caption %}
                <figcaption>{{preview.caption}}</figcaption>
              {% endif %}
            </figure>
          </div>
        {% elif preview.type == 'embed' %}
          <a
            href="{{ preview.url }}"
            target="_blank"
          >
            <div class="embed-view">
              <h3
                class="{{'subtitle' if not preview.subject}}"
              >
                {{ preview.subject if preview.subject else '(No title)' }}
              </h2>
              {% if preview.description %}
                <p>
                  {{ preview.description }}
                </p>
              {% endif %}
            </div>
          </a>
        {% endif %}
      {% endfor %}
    </div>
  {% endif %}

{% endmacro %}
