{% extends 'cards/base.html' %}

{% block content %}
  <div class="level">
    <div class="level-left">
      <div class="level-item">
        <h2 class="title is-4">Background images</h2>
      </div>
    </div>
    <div class="level-right">
      <div class="level-item">
        <a class="button is-light" href="{% url 'cards:list' %}">Back to cards</a>
      </div>
      <div class="level-item">
        <a class="button is-link" href="{% url 'cards:backgrounds_download_all' %}">Download all backgrounds</a>
      </div>
    </div>
  </div>

  <div class="columns">
    <div class="column is-half">
      <div id="htmx-background-form">
        {% include 'cards/_background_form.html' with form=form %}
      </div>
    </div>
    <div class="column is-half">
      <div id="backgrounds-list">
        {% include 'cards/_backgrounds_list.html' with backgrounds=backgrounds %}
      </div>
    </div>
  </div>

{% endblock %}