{% extends 'layouts/main.django' %}
{% block head %}
  <script type="text/javascript" src="/static/scripts/resize.js"></script>
  <script type="text/javascript">
    const sizes = {
      fitBoth: {
        src: '{{ CDNURL }}/medium/{{ Post.FileName }}',
        width: '{{ Post.GetMediumSize.Width }}',
        height: '{{ Post.GetMediumSize.Height }}'
      },
      fitWidth: {
        src: '{{ CDNURL }}/medium/{{ Post.FileName }}',
        width: '{{ Post.GetMediumSize.Width }}',
        height: '{{ Post.GetMediumSize.Height }}'
      },
      fitHeight: {
        src: '{{ CDNURL }}/medium/{{ Post.FileName }}',
        width: '{{ Post.GetMediumSize.Width }}',
        height: '{{ Post.GetMediumSize.Height }}'
      },
      small: {
        src: '{{ CDNURL }}/small/{{ Post.FileName }}',
        width: '{{ Post.GetSmallSize.Width }}',
        height: '{{ Post.GetSmallSize.Height }}'
      },
      medium: {
        src: '{{ CDNURL }}/medium/{{ Post.FileName }}',
        width: '{{ Post.GetMediumSize.Width }}',
        height: '{{ Post.GetMediumSize.Height }}'
      },
      large: {
        src: '{{ CDNURL }}/large/{{ Post.FileName }}',
        width: '{{ Post.GetLargeSize.Width }}',
        height: '{{ Post.GetLargeSize.Height }}'
      },
      original: {
        src: '{{ CDNURL }}/original/{{ Post.FileName }}',
        width: '{{ Post.GetOriginalSize.Width }}',
        height: '{{ Post.GetOriginalSize.Height }}'
      }
    }
    document.addEventListener('DOMContentLoaded', function () {
      const imageWidth = parseInt('{{ Post.GetMediumSize.Width }}')
      const imageHeight = parseInt('{{ Post.GetMediumSize.Height }}')
      const img = document.getElementById('post-image')
    
      if (img) {
        const availableHeight = getAvailableHeight()
    
        if (imageHeight > imageWidth) {
          const ratio = availableHeight / imageHeight
          img.style.width = Math.floor(imageWidth * ratio) + 'px'
          img.style.height = availableHeight + 'px'
        } else {
          const containerWidth = document.querySelector('.post-image-container').offsetWidth
          const ratio = containerWidth / imageWidth
          img.style.width = containerWidth + 'px'
          img.style.height = Math.floor(imageHeight * ratio) + 'px'
        }
      }
    })
  </script>
{% endblock %}
{% block content %}
  {% if Error %}
    <div class="centered-main">
      <div class="error">{{ Error }}</div>
    </div>
  {% else %}
    <div class="single-post">
      <div class="single-post-bar">
        {% if Post.Title %}
          <h1 class="post-title">{{ Post.Title }}</h1>
        {% else %}
          <h1 class="post-title">Post #{{ Post.ID }}</h1>
        {% endif %}
        <div class="single-post-bar-size-actions">
          <a href="javascript:void(0);" onclick="switchSize('fitBoth');" class="size-selected">Fit-Both</a>
          <a href="javascript:void(0);" onclick="switchSize('fitHeight');">Fit-Height</a>
          <a href="javascript:void(0);" onclick="switchSize('fitWidth');">Fit-Width</a>
          <a href="javascript:void(0);" onclick="switchSize('small');">Small</a>
          <a href="javascript:void(0);" onclick="switchSize('medium');">Medium</a>
          <a href="javascript:void(0);" onclick="switchSize('large');">Large</a>
          <a href="javascript:void(0);" onclick="switchSize('original');">Original</a>
          {% if User and Post.Uploader.Username == User.Username or User.CanEditTags %}
            | <a href="/posts/{{ Post.ID }}/edit">Edit Post</a>
          {% endif %}
        </div>
      </div>
      {% if not Post.IsApproved %}
        <div class="info" style="margin-bottom: 12px;">
          This post is pending approval. See <a href="/help/mod_queue">mod queues</a>.
        </div>
      {% endif %}
      <div class="post-image-container">
        <img src="{{ CDNURL }}/medium/{{ Post.FileName }}" alt="{{ Post.Title }}" id="post-image" />
      </div>
      <div class="post-details">
        <div class="post-detail-item">
          <span class="post-detail-label">ID:</span>
          <span class="post-detail-value">{{ Post.ID }}</span>
        </div>
        <div class="post-detail-item">
          <span class="post-detail-label">Uploader:</span>
          <span class="post-detail-value"><a href="/u/{{ Post.Uploader.Username }}">{{ Post.Uploader.Username }}</a></span>
        </div>
        <div class="post-detail-item">
          <span class="post-detail-label">Created:</span>
          <span class="post-detail-value"><a href="/posts?date={{ Post.CreatedAt|date:'2006-01-02' }}">{{ Post.CreatedAt|naturaltime }}</a></span>
        </div>
        <div class="post-detail-item">
          <span class="post-detail-label">Original Size:</span>
          <span class="post-detail-value"><a href="{{ CDNURL }}/original/{{ Post.FileName }}" target="_blank">{{ Post.GetOriginalSize.Width }}x{{ Post.GetOriginalSize.Height }} ({{ Post.GetOriginalSize.GetFileSizeFormatted }})</a></span>
        </div>
        <div class="post-detail-item">
          <span class="post-detail-label" id="favourites">Favourites:</span>
          <span class="post-detail-value post-favourite-actions">
            {{ Post.FavouriteCount }}
            <form action="/posts/{{ Post.ID }}/favourite" method="post">
              <input type="hidden" name="next" value="{{ Request.Path }}#favourites" />
              <button type="submit" class="icon-button" title="{{ IsUserFavourited|yesno:'Unfavourite this post,Favourite this post' }}">
                {% if IsUserFavourited %}
                  <svg viewBox="0 0 24 24">
                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
                  </svg>
                {% else %}
                  <svg viewBox="0 0 24 24">
                    <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" />
                  </svg>
                {% endif %}
              </button>
            </form>
          </span>
        </div>
        <div class="post-detail-item">
          <span class="post-detail-label">Rating:</span>
          <span class="post-detail-value post-rating {{ Post.Rating }}"><a href="/posts?rating={{ Post.Rating }}">{{ Post.Rating }}</a></span>
        </div>
      </div>
      <div class="post-details">
        <div class="post-detail-item">
          <span class="post-detail-label">Source:</span>
          <span class="post-detail-value">
            {% if Post.SourceURL %}
              <a href="{{ Post.SourceURL }}" target="_blank">{{ Post.SourceURL }}</a>
            {% else %}
              N/A
            {% endif %}
          </span>
        </div>
      </div>
      <div class="post-details">
        <div class="post-detail-item">
          <span class="post-detail-label">Tags:</span>
          <span class="post-detail-value">
            {% if Post.Tags %}
              {% for tag in Post.Tags %}
                <a href="/posts?tags={{ tag.Name }}" style="color: {{ tag.Type.Color }};" class="post-tag">{{ tag.Name }} <span class="tag-count">({{ tag.Count }})</span></a>
              {% endfor %}
            {% else %}
              No tags
            {% endif %}
          </span>
        </div>
      </div>
      <div class="post-details">
        <div class="post-detail-item">
          <span class="post-detail-label">Description:</span>
          <span class="post-detail-value">{{ Post.Description|default:'No description provided.' }}</span>
        </div>
      </div>
    </div>
  {% endif %}
{% endblock %}