{% extends "base.html" %}

{% block content %}
  <div class="container-fluid pt-3 ps-3">
    <h1>A picture is worth a thousand words</h1>
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Select a picture
      </button>
      <ul class="dropdown-menu">
        {% for name in picture_names %}
          <li>
            <a
              class="dropdown-item"
              hx-post="{{ url_for('picture') }}"
              hx-target="#picture"
              hx-vals='{"picture_name": "{{ name }}"}'
              >{{ name }}</a
            >
          </li>
        {% endfor %}
      </ul>
    </div>
    <div id="picture" class="mt-4"></div>
  </div>
{% endblock content %}