{% extends "layout.html" %}

{% block title %}{{ artist }}'s Gallery{% endblock %}

{% block content %}
  <h1 style="text-align:center; margin-top: 1rem;">{{ artist }}</h2>

  <!-- Pagination Controls -->
  <div class="pagination-container">
    {% if images.has_prev %}
      <a class="pagination-link" href="{{ url_for('main.artist_gallery', artist_name=artist, page=images.prev_num) }}">← Previous</a>
    {% endif %}

    {% for p in range(1, images.pages + 1) %}
      <a class="pagination-link {% if p == images.page %}active{% endif %}" href="{{ url_for('main.artist_gallery', artist_name=artist, page=p) }}">{{ p }}</a>
    {% endfor %}

    {% if images.has_next %}
      <a class="pagination-link" href="{{ url_for('main.artist_gallery', artist_name=artist, page=images.next_num) }}">Next →</a>
    {% endif %}
  </div>

  <!-- Gallery Grid -->
    <div class="gallery-grid">
    {% for image in images %}
    <div class="gallery-item">
        <div class="gallery-thumb img-clickable"
            data-full="{{ url_for('static', filename=image.filepath) }}"
            style="background-image: url('{{ url_for('static', filename=image.filepath) }}');" 
            data-full="{{ url_for('static', filename=image.filepath) }}"
            data-filename="{{ image.filename }}">
        </div>
        <a href="{{ url_for('main.artist_gallery', artist_name=image.artist) }}">{{ image.artist }}</a>
        <span class="image-date">
            {{ image.taken_at or image.imported_at | datetimeformat }}
        </span>
    </div>
    {% endfor %}
    </div>


  <!-- Pagination Controls -->
  <div class="pagination-container">
    {% if images.has_prev %}
      <a class="pagination-link" href="{{ url_for('main.artist_gallery', artist_name=artist, page=images.prev_num) }}">← Previous</a>
    {% endif %}

    {% for p in range(1, images.pages + 1) %}
      <a class="pagination-link {% if p == images.page %}active{% endif %}" href="{{ url_for('main.artist_gallery', artist_name=artist, page=p) }}">{{ p }}</a>
    {% endfor %}

    {% if images.has_next %}
      <a class="pagination-link" href="{{ url_for('main.artist_gallery', artist_name=artist, page=images.next_num) }}">Next →</a>
    {% endif %}
  </div>
{% endblock %}