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

{% block content %}
  <section class="section">
    <h2 class="title is-4">Cards overview — bulk edit{% if card_count %} ({{ card_count }} card{{ card_count|pluralize }}){% endif %}</h2>
    <p class="subtitle is-6">Edit multiple cards inline and save changes in one go.</p>

    <style>
      /* Allow inputs inside the table to wrap on narrow viewports */
      .table-container .field.has-addons{white-space:normal}
      .table-container .control.is-expanded{width:100%}
      .table-container input.input{min-width:100px}
      .table-container td{padding-left: 0.1rem; padding-right: 0.1rem;}
      /* Ensure thumbnails don't shrink layout unexpectedly */
      .bulk-thumb{flex:none}
      /* Make this page full-bleed: allow the app container to use the full viewport width */
      .app-container{max-width:none; width:100%; padding-left:0.5rem; padding-right:0.5rem}
      /* Remove extra section padding so content touches edges if needed */
      section.section{padding-left:0; padding-right:0}
      /* Table container: allow horizontal scroll and make table use full available width */
      .table-container{width:100%; overflow-x:auto}
      .table-container .table{min-width:1100px}
    </style>

    <div style="margin-bottom:1rem">
      <form method="post" action="{% url 'cards:overview_create_images' %}" enctype="multipart/form-data" style="display:inline-block; margin-right:1rem">
        {% csrf_token %}
        <div class="file has-name">
          <label class="file-label">
            <input class="file-input" type="file" name="images" multiple>
            <span class="file-cta"><span class="file-icon">📁</span><span class="file-label">Select images…</span></span>
          </label>
        </div>
        <button class="button is-small is-link" type="submit">Create cards from images</button>
      </form>
    </div>

    <form method="post" action="{% url 'cards:overview_bulk_update' %}">
      {% csrf_token %}
      <div class="table-container">
        <table class="table is-fullwidth is-striped">
          <thead>
            <tr>
              <th>Preview</th>
              <th>Name</th>
              <th>Background</th>
              <th>Speed</th>
              <th>Weight</th>
              <th>Height</th>
              <th>Intel</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% if formset %}
              {{ formset.management_form }}
              {% for form in formset.forms %}
                {{ form.id }}
                <tr>
                  <td>
                    {% if form.instance.image %}
                      <img class="bulk-thumb" src="{{ form.instance.image.url }}" alt="{{ form.instance.name }}">
                    {% else %}
                      <div class="bulk-thumb empty"></div>
                    {% endif %}
                  </td>
                  <td>{{ form.name }}</td>
                  <td>{{ form.background }}</td>
                  <td style="width:90px">
                    <div class="field has-addons">
                      <div class="control is-expanded">{{ form.speed }}</div>
                      <div class="control"><a class="button is-static">km/h</a></div>
                    </div>
                  </td>
                  <td style="width:90px">
                    <div class="field has-addons">
                      <div class="control is-expanded">{{ form.weight }}</div>
                      <div class="control"><a class="button is-static">kg</a></div>
                    </div>
                  </td>
                  <td style="width:90px">
                    <div class="field has-addons">
                      <div class="control is-expanded">{{ form.height }}</div>
                      <div class="control"><a class="button is-static">m</a></div>
                    </div>
                  </td>
                  <td style="width:90px">
                    <div class="field has-addons">
                      <div class="control is-expanded">{{ form.intelligence }}</div>
                      <div class="control"><a class="button is-static">score</a></div>
                    </div>
                  </td>
                  <td style="width:90px">ID: {{ form.instance.pk }}</td>
                </tr>
              {% endfor %}
            {% else %}
              {% for card in cards %}
                <tr>
                  <td>
                    {% if card.image %}
                      <img class="bulk-thumb" src="{{ card.image.url }}" alt="{{ card.name }}">
                    {% else %}
                      <div class="bulk-thumb empty"></div>
                    {% endif %}
                  </td>
                  <td><input class="input" name="name-{{ card.pk }}" value="{{ card.name }}"></td>
                  <td>
                    <div class="select"><select name="background-{{ card.pk }}">
                      <option value="">Site default</option>
                      {% for bg in backgrounds %}
                        <option value="{{ bg.pk }}"{% if card.background and card.background.pk == bg.pk %} selected{% endif %}>{{ bg.title|default:'Background' }}</option>
                      {% endfor %}
                    </select></div>
                  </td>
                  <td style="width:90px">
                    <div class="field has-addons">
                      <div class="control is-expanded"><input class="input" name="speed-{{ card.pk }}" value="{{ card.speed }}"></div>
                      <div class="control"><a class="button is-static">km/h</a></div>
                    </div>
                  </td>
                  <td style="width:90px">
                    <div class="field has-addons">
                      <div class="control is-expanded"><input class="input" name="weight-{{ card.pk }}" value="{{ card.weight }}"></div>
                      <div class="control"><a class="button is-static">kg</a></div>
                    </div>
                  </td>
                  <td style="width:90px">
                    <div class="field has-addons">
                      <div class="control is-expanded"><input class="input" name="height-{{ card.pk }}" value="{{ card.height }}"></div>
                      <div class="control"><a class="button is-static">m</a></div>
                    </div>
                  </td>
                  <td style="width:90px">
                    <div class="field has-addons">
                      <div class="control is-expanded"><input class="input" name="intelligence-{{ card.pk }}" value="{{ card.intelligence }}"></div>
                      <div class="control"><a class="button is-static">score</a></div>
                    </div>
                  </td>
                  <td>ID: {{ card.pk }}</td>
                </tr>
              {% endfor %}
            {% endif %}
          </tbody>
        </table>
      </div>

      <div class="field">
        <div class="control">
          <button class="button is-primary" type="submit">Save changes</button>
          <a class="button is-light" href="{% url 'cards:list' %}">Back to list</a>
        </div>
      </div>
    </form>
  </section>
{% endblock %}