{% load card_configuration %}

{% for card in card_list %}
<div class="card-configuration-card position-relative">
    {% if not read_only %}
    <div class="position-absolute top-0 end-0 p-2 d-flex">
        <a href="{% url 'card_export' card_id=card.id %}" class="btn p-0" title="Export card">
          <i class="bi bi-cloud-arrow-up-fill"></i>
        </a>
        <form action="{% url 'card_delete' card_id=card.id %}" method="post">
            {% csrf_token %}
            <button type="submit" class="btn p-0" title="Delete card">
              <i class="bi bi-trash-fill"></i>
            </button>
        </form>
    </div>
    {% endif %}
    <h4>{{card.name}}</h4>
    <ul>
    {% for card_app in card.card_apps.all %}
        <li>{{card_app.name}}</li>
    {% endfor %}
    {% if not read_only %}
    {% if card.card_apps.all.count != card_app_list.count %}
        <li>
            <form action="{% url 'card_add_app' card_id=card.id %}" method="post" class="row row-cols-lg-auto g-3 align-items-center">
                {% csrf_token %}
                <div class="col-12">
                    <label class="visually-hidden" for="card-app">Card App</label>
                    <div class="input-group">
                        <select class="form-select" aria-label="Default select example" name="card-app" id="card-app">
                        {% for card_app in card|card_list_non_added_app %}
                            <option value="{{card_app.id}}">{{card_app.name}}</option>
                        {% endfor %}
                        </select>
                    </div>
                  </div>

                  <div class="col-12">
                    <button type="submit" class="btn btn-primary">Add</button>
                  </div>
            </form>
        </li>
    {% endif %}
    {% endif %}
    </ul>
</div>
{% endfor %}

{% if not read_only %}
<div class="card-configuration-card">
    <form action="{% url 'card_create' %}" method="post" class="row row-cols-lg-auto g-3 align-items-center">
        {% csrf_token %}
        <div class="col-12">
          <label class="visually-hidden" for="name">Card Name</label>
          <div class="input-group">
            <input type="text" class="form-control" id="name" name="name" placeholder="Card Name" value="{{card_form.name.value|default_if_none:""}}">
          </div>
        </div>

        <div class="col-12">
          <button type="submit" class="btn btn-primary">New Card</button>
        </div>
    </form>
</div>
{% endif %}