---
layout: main/base.html
---
<div class="sm:container m-0 p-0 sm:mx-auto sm:px-4 md:px-10">
  <div class="the-photos-card">
    <!-- top navbar on mobile -->
    <div class="the-navbar sm:hidden">
      <div class="navbar-start">
        <!-- back to posts -->
        <a aria-label="back" href="/photos" class="btn btn-ghost btn-circle">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M3 3h7v7H3V3zM14 3h7v7h-7V3zM3 14h7v7H3v-7zM14 14h7v7h-7v-7z" />
          </svg>
        </a>
        <!-- back home -->
        <a aria-label="home" href="/" class="btn btn-ghost btn-circle">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
            <polyline
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              points="9 22 9 12 15 12 15 22" />
          </svg>
        </a>
      </div>
      <div class="navbar-end">
        <!-- comment -->
        {% include "post/commentbutton.html" %}
        <!-- share -->
        {% include "post/sharebutton.html" %}
      </div>
    </div>
    <!-- cover -->
    <div class="sm:w-1/2 flex items-center justify-center bg-black rounded-none sm:rounded-l-xl overflow-hidden relative">
      <div class="carousel w-full">
        {% for image in cover %}
          <div id="item{{ forloop.index }}" class="carousel-item w-full">
            <img src="{{ image.url }}" alt="Cover" class="object-contain" />
          </div>
        {% endfor %}
      </div>
      <!-- Carousel Indicators (hidden if only one image) -->
      {% if cover.size > 1 %}
        <div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 z-10 flex gap-2 py-2">
          {% for image in cover %}
            <a aria-label="indicator item" href="#item{{ forloop.index }}" class="btn btn-circle btn-xs">{{ forloop.index }}</a>
          {% endfor %}
        </div>
      {% endif %}
    </div>
    <!-- description -->
    <div class="sm:w-1/2 flex-grow flex flex-col overflow-hidden">
      <!-- top navbar -->
      <div class="navbar bg-base-100 rounded-t-xl px-4 hidden sm:block border-b border-base-200">
        <div class="navbar-start">
          <!-- back to posts -->
          <a aria-label="back" href="/photos" class="btn btn-ghost btn-circle">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M3 3h7v7H3V3zM14 3h7v7h-7V3zM3 14h7v7H3v-7zM14 14h7v7h-7v-7z" />
            </svg>
          </a>
          <!-- back home -->
  			  <a aria-label="home" href="/" class="btn btn-ghost btn-circle">
  			  	<svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
              <polyline
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                points="9 22 9 12 15 12 15 22" />
            </svg>
  			  </a>
        </div>
        <div class="navbar-end">
          <!-- comment -->
        {% include "post/commentbutton.html" %}
          <!-- share -->
          {% include "post/sharebutton.html" %}
        </div>
      </div>
      <!-- content -->
      <div class="card-body sm:overflow-y-auto flex-grow">
        <div class="prose max-w-none">
          <h3>{{ title }}</h3>
          <div class="text-sm m-0">{{ date | date: "%a, %d %b %Y" }}</div>
          {{ content }}
        </div>
      </div>
      <!-- bottom navbar -->
      {%- if collections.photos %}
      {%- assign previousPhotos = collections.photos | getPreviousCollectionItem %}
      {%- assign nextPhotos = collections.photos | getNextCollectionItem %}
      {%- if nextPhotos or previousPhotos %}
      <div class="card-action navbar bg-base-100 rounded-b-xl px-4 border-t border-base-200">
        <div class="navbar-start">
          <!-- next post -->
          {%- if nextPhotos %}
          <a aria-label="next" href="{{ nextPhotos.url }}" class="btn btn-ghost btn-circle">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
          </a>
          {% endif %}
        </div>
        <!-- credit license -->
        <div class="navbar-center">
          <a class="text-md font-bold link link-hover" href="#">License</a>
        </div>
        <div class="navbar-end">
          <!-- prev post -->
          {%- if previousPhotos %}
          <a aria-label="prev" href="{{ previousPhotos.url }}" class="btn btn-ghost btn-circle">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M14 5l7 7m0 0l-7 7m7-7H3" />
            </svg>
          </a>
          {% endif %}
        </div>
      </div>
      {% endif %}
  		{% endif %}
    </div>
  </div>
</div>
{% include "post/sharemodal.html" %}
{% include "post/comment-modal.html" %}