toptrumps/templates/cards/bulk_edit.html

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

{% block content %}
<section class="section">
    <h2 class="title is-4">Cards overview — bulk edit</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:50px}
      /* 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">{{ form.speed }}</td>
                <td style="width:90px">{{ form.weight }}</td>
                <td style="width:90px">{{ form.height }}</td>
                <td style="width:90px">{{ form.intelligence }}</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 %}