{% extends "spider_base/uc_base.html" %}
{% load i18n %}
{% block title %}{% blocktrans trimmed with name=object.name %}
  Delete: {{name}}
{% endblocktrans %}{% endblock %}

{% block content %}
<div>
  <div class="w3-padding">
    {# index is redirected in view #}
    <a class="w3-left" href="{% url 'spider_base:ucomponent-update' token=object.token %}">{% trans 'Back' %}</a>
    <h1 class="w3-center">
      {% blocktrans trimmed %}
        Delete User Component:
      {% endblocktrans %} <em>{{object.name}}</em>
    </h1>
  </div>

  <div class="w3-padding">
    <div class="w3-center w3-red w3-xlarge" style="margin-bottom:20px">
      {% blocktrans trimmed with name=object %}
        Warning this deletes the component and all depending content.<br/>
        Go back if you don't want to this and you didn't hit delete.<br/>
        You can abort the deletion process with reset if it is shown.<br/>
        It is always shown except no deletion is in progress.<br/>
      {% endblocktrans %}
    </div>
  </div>

  <div class="w3-padding">
    <table class="w3-table-all">
      <thead>
        <tr>
          <th class="">{% trans 'Deleted Content' %}</th>
        </tr>
      </thead>
      <tbody>
        {% for content in object.contents.all %}
          <tr>
            <td>
              {{content}}
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="w3-bar w3-black w3-container">
    {% if not remaining or remaining == 0 %}
    <form method="post" action="{{request.path}}">
      {% csrf_token %}
      <input type="hidden" name="action" value="delete" />
      <button class="w3-bar-item w3-hover-yellow w3-button w3-red">{% trans 'Delete' %}</button>
    </form>
    {% endif %}

    {% if remaining %}
    <form method="post" action="{{request.path}}">
      {% csrf_token %}
      <input type="hidden" name="action" value="reset" />
      <button class="w3-bar-item w3-hover-blue w3-button w3-green">{% trans 'Reset' %}</button>
    </form>
    {% endif %}
  </div>
</div>
{% endblock %}
