{% extends 'entity/layout.html.twig' %}

{% set entityName = element.name %}
{% set backRoute  = 'elements_default' %}
{% set backLabel  = 'Éléments' %}

{% block stylesheets %}
  {{ parent() }}
  <style>
    .passive-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; }
    @media (max-width: 720px) { .passive-grid { grid-template-columns: 1fr; } }
    .passive-block {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 8px; padding: 16px 18px;
    }
    .passive-block-title {
      font-size: .82rem; text-transform: uppercase; letter-spacing: .05em;
      font-weight: 700; margin-bottom: 10px;
      display: flex; align-items: center; gap: 8px;
    }
    .passive-block.advantages    .passive-block-title { color: var(--success); }
    .passive-block.disadvantages .passive-block-title { color: var(--danger); }
    .passive-block-body {
      color: var(--text); font-size: .92rem; line-height: 1.55; white-space: pre-line;
    }
    .passive-block-empty { color: var(--muted); font-style: italic; font-size: .85rem; }

    .er-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    @media (max-width: 720px) { .er-grid { grid-template-columns: 1fr; } }

    .er-section-title {
      font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
      font-weight: 700; margin-bottom: 8px;
    }
    .er-section-title.efficace    { color: #58a6ff; }
    .er-section-title.faible      { color: #f85149; }
    .er-section-title.resiste     { color: #3fb950; }
    .er-section-title.est-resiste { color: #f0d25a; }

    .er-list { list-style: none; padding: 0; margin: 0; }
    .er-list li {
      display: flex; justify-content: space-between; align-items: center;
      padding: 7px 12px; border-bottom: 1px solid var(--border);
      font-size: .92rem;
    }
    .er-list li:last-child { border-bottom: none; }
    .er-list .name { color: var(--text); display: inline-flex; align-items: center; gap: 8px; }
    .er-list .mult { font-weight: 700; font-variant-numeric: tabular-nums; }
    .er-list .mult.weak     { color: #f85149; }
    .er-list .mult.weak-mid { color: #f0d25a; }
    .er-list .mult.weak-x3  { color: #58a6ff; }
    .er-list .mult.resist   { color: #3fb950; }
    .er-list .mult.null     { color: var(--muted); font-style: italic; }
    .er-empty { color: var(--muted); padding: 14px; font-style: italic; text-align: center; }

    .elem-color-chip {
      display: inline-block; width: 24px; height: 24px; border-radius: 4px;
      border: 1px solid rgba(255,255,255,.18); vertical-align: middle; flex-shrink: 0;
    }
    .elem-color-chip-lg { width: 20px; height: 20px; margin-right: 10px; }
    .elem-icon-inline { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; flex-shrink: 0; }
    .elem-icon-lg { width: 24px; height: 24px; margin-right: 12px; vertical-align: middle; image-rendering: pixelated; }
  </style>
{% endblock %}

{% macro mult_class(value) %}
  {%- if value == 0 -%}null
  {%- elseif value == 1.5 -%}weak-mid
  {%- elseif value == 3 -%}weak-x3
  {%- elseif value > 1 -%}weak
  {%- elseif value < 1 -%}resist
  {%- endif -%}
{% endmacro %}

{% macro mult_label(value) %}
  {%- if value == 0 -%}× 0 (immunité)
  {%- elseif value < 0 -%}× {{ value }} (absorbe)
  {%- else -%}× {{ value }}
  {%- endif -%}
{% endmacro %}

{% macro relation_list(entries, elementMap) %}
  {% import _self as macros %}
  {% if entries is empty %}
    <div class="er-empty">—</div>
  {% else %}
    <ul class="er-list">
      {% for otherId, mult in entries %}
        <li>
          <span class="name">
            {% if elementMap[otherId].iconUrl %}
              <img src="{{ elementMap[otherId].iconUrl }}" class="elem-icon-inline" alt="">
            {% elseif elementMap[otherId].color %}
              <span class="elem-color-chip" style="background:{{ elementMap[otherId].color }};"></span>
            {% endif %}
            <a href="{{ path('element_show', {id: otherId}) }}" style="color:inherit;text-decoration:none">{{ elementMap[otherId].name ?? '?' }}</a>
          </span>
          <span class="mult {{ macros.mult_class(mult) }}">{{ macros.mult_label(mult) }}</span>
        </li>
      {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}

{% block detail %}
{% import _self as macros %}
{% set efficaceContre = outgoing|filter(m => m > 1) %}
{% set estResistePar  = outgoing|filter(m => m < 1) %}
{% set faibleContre   = incoming|filter(m => m > 1) %}
{% set resisteA       = incoming|filter(m => m < 1) %}
<div class="detail-card">
  <div class="detail-header">
    <div class="detail-title">
      <h1>
        {% set selfMap = elementMap[element.id] ?? null %}
        {% if selfMap and selfMap.iconUrl %}
          <img src="{{ selfMap.iconUrl }}" class="elem-icon-lg" alt="">
        {% elseif element.color %}
          <span class="elem-color-chip elem-color-chip-lg" style="background:{{ element.color }};" title="{{ element.color }}"></span>
        {% endif %}
        {{ element.name }}
      </h1>
      <div class="detail-meta">
        <span class="card-game">
          <img src="{{ path('game_logo', {gameId: element.gameId}) }}" class="game-logo" alt="">
          {{ ('game.id.' ~ element.gameId)|trans({}, 'game') }}
        </span>
      </div>
    </div>
  </div>

  <div class="detail-body">

    {# ── Avantages / inconvénients passifs (édités en admin) ── #}
    {% set hasPassiveText = element.advantages or element.disadvantages %}
    {% if hasPassiveText %}
      <div class="passive-grid">
        <div class="passive-block advantages">
          <div class="passive-block-title">▲ Avantages passifs</div>
          {% if element.advantages %}
            <div class="passive-block-body">{{ element.advantages }}</div>
          {% else %}
            <div class="passive-block-empty">Aucun avantage renseigné.</div>
          {% endif %}
        </div>
        <div class="passive-block disadvantages">
          <div class="passive-block-title">▼ Inconvénients passifs</div>
          {% if element.disadvantages %}
            <div class="passive-block-body">{{ element.disadvantages }}</div>
          {% else %}
            <div class="passive-block-empty">Aucun inconvénient renseigné.</div>
          {% endif %}
        </div>
      </div>
    {% endif %}

    <div class="er-grid">
      <div class="detail-section">
        <div class="er-section-title efficace">Efficace contre</div>
        {{ macros.relation_list(efficaceContre, elementMap) }}
      </div>
      <div class="detail-section">
        <div class="er-section-title faible">Faible contre</div>
        {{ macros.relation_list(faibleContre, elementMap) }}
      </div>
      <div class="detail-section">
        <div class="er-section-title resiste">Résiste à</div>
        {{ macros.relation_list(resisteA, elementMap) }}
      </div>
      <div class="detail-section">
        <div class="er-section-title est-resiste">Est résisté par</div>
        {{ macros.relation_list(estResistePar, elementMap) }}
      </div>
    </div>
  </div>
</div>
{% endblock %}