<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{% block title %}Pets of Powerwashing{% endblock %}</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      .modal {
        display: none;
      }
      .modal.active {
        display: flex;
      }
    </style>
  </head>
  <body class="bg-gray-100 min-h-screen">
    <nav class="bg-white">
      <div class="max-w-6xl mx-auto px-4">
        <div class="flex justify-between items-center py-4">
          <div class="text-xl font-semibold text-gray-800">
            <a href="{{ url_for('main.index') }}">Pets of Powerwashing</a>
          </div>
          <div class="space-x-4">
            <a
              href="{{ url_for('main.index') }}"
              class="text-gray-600 hover:text-gray-800"
              >Gallery</a
            >
            {% if session.logged_in %}
            <a
              href="{{ url_for('pictures.upload') }}"
              class="text-gray-600 hover:text-gray-800"
              >Upload New</a
            >
            <a
              href="{{ url_for('auth.logout') }}"
              class="text-gray-600 hover:text-gray-800"
              >Logout</a
            >
            {% else %}
            <a
              href="{{ url_for('auth.login') }}"
              class="text-gray-600 hover:text-gray-800"
              >Login</a
            >
            {% endif %}
          </div>
        </div>
      </div>
    </nav>

    <main class="max-w-6xl mx-auto px-4 py-8">
      {% with messages = get_flashed_messages() %} {% if messages %} {% for
      message in messages %}
      <div
        class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 mb-4"
        role="alert"
      >
        {{ message }}
      </div>
      {% endfor %} {% endif %} {% endwith %} {% block content %}{% endblock %}
    </main>

    <!-- Modal for fullscreen image view -->
    <div id="imageModal" class="modal fixed inset-0 bg-black bg-opacity-75 items-center justify-center z-50" onclick="closeModal()">
      <div class="relative max-w-full max-h-full p-4" onclick="event.stopPropagation()">
        <button onclick="closeModal()" class="absolute top-4 right-4 text-white text-4xl hover:text-gray-300 z-10">&times;</button>
        <img id="modalImage" src="" alt="" class="max-w-full max-h-full object-contain">
        <div id="modalInfo" class="absolute bottom-4 left-4 bg-black bg-opacity-50 text-white p-3 rounded">
          <h3 id="modalTitle" class="text-lg font-semibold"></h3>
          <p id="modalDescription" class="text-sm"></p>
          <p id="modalDate" class="text-xs opacity-75"></p>
        </div>
      </div>
    </div>

    <script>
      function openModal(imageSrc, title, description, date) {
        document.getElementById('modalImage').src = imageSrc;
        document.getElementById('modalTitle').textContent = title;
        document.getElementById('modalDescription').textContent = description;
        document.getElementById('modalDate').textContent = date;
        document.getElementById('imageModal').classList.add('active');
        document.body.style.overflow = 'hidden';
      }

      function closeModal() {
        document.getElementById('imageModal').classList.remove('active');
        document.body.style.overflow = 'auto';
      }

      // Close modal with Escape key
      document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
          closeModal();
        }
      });

      // Like functionality
      function likePicture(pictureId) {
        fetch('/like/' + pictureId, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          }
        })
        .then(response => response.json())
        .then(data => {
          const likeBtn = document.getElementById('like-btn-' + pictureId);
          const likeCount = document.getElementById('like-count-' + pictureId);
          
          // Update like count
          likeCount.textContent = data.like_count;
          
          // Update button appearance and heart
          if (data.liked) {
            likeBtn.className = 'flex-1 flex items-center justify-center px-4 py-2 rounded transition-colors bg-red-500 text-white hover:bg-red-600';
            likeBtn.querySelector('span').textContent = '❤️';
          } else {
            likeBtn.className = 'flex-1 flex items-center justify-center px-4 py-2 rounded transition-colors bg-gray-200 text-gray-700 hover:bg-gray-300';
            likeBtn.querySelector('span').textContent = '🤍';
          }
        })
        .catch(error => {
          console.error('Error:', error);
        });
      }
    </script>
  </body>
</html>
