{% extends 'admin/layout.html.twig' %}
{% block page_title %}Éléments{% endblock %}
{% block breadcrumb %}<span class="sep">/</span><span class="breadcrumb-text">Éléments</span>{% endblock %}

{% block content %}
<div class="toolbar">
  <span class="toolbar-count">{{ elements|length }} élément{{ elements|length != 1 ? 's' }}</span>
</div>

{% if elements is empty %}
  <p class="empty">Aucun élément.</p>
{% else %}
<table>
  <thead>
    <tr>
      <th data-sort="id" data-sort-type="num">ID</th>
      <th data-sort="origin" data-sort-type="num">Origin</th>
      <th data-sort="name">Nom</th>
      <th>Jeu</th>
      <th>Couleur</th>
      <th>Avantages</th>
      <th>Inconvénients</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
  {% for el in elements %}
    <tr data-game="{{ el.gameId }}" data-id="{{ el.id }}">
      <td>{{ el.id }}</td>
      <td>{% if el.originalId %}<span class="badge badge-type">{{ el.originalId }}</span>{% else %}<span class="dash">—</span>{% endif %}</td>
      <td>{{ el.name }}</td>
      <td><span class="badge badge-game">{{ ('game.id.' ~ el.gameId)|trans({}, 'game') }}</span></td>
      <td>
        {% if el.color %}
          <span style="display:inline-block;width:20px;height:20px;border-radius:4px;background:{{ el.color }};border:1px solid rgba(255,255,255,.15);vertical-align:middle"></span>
          <span style="font-size:.72rem;color:var(--muted);margin-left:6px">{{ el.color }}</span>
        {% else %}<span class="dash">—</span>{% endif %}
      </td>
      <td>{% if el.advantages %}<span class="check">✓</span>{% else %}<span class="dash">—</span>{% endif %}</td>
      <td>{% if el.disadvantages %}<span class="check">✓</span>{% else %}<span class="dash">—</span>{% endif %}</td>
      <td>
        <div class="actions">
          <a href="{{ path('admin_element_edit', {id: el.id}) }}" class="btn btn-sm btn-edit">Modifier</a>
        </div>
      </td>
    </tr>
  {% endfor %}
  </tbody>
</table>
{% endif %}
{% endblock %}