{% extends "common/base.html" %}
{% load static %}
{% load django_bootstrap5 %}
{% load character_extras %}

{% block title %}{{ character.name }}{% endblock %}

{% block content %}
    <h1>{{ character.name }}</h1>
    <p>
        Joueur : {{ character.player.get_full_name|default:character.player.username }}
    </p>
    {% if party %}
        <p>
            Groupe : <a href="{{ party.get_absolute_url }}">{{ party }}</a>
            &bullet;
            Joueurs : {% for other in party.characters.all %}<a href="{% url "character:view" pk=other.pk %}?party={{ party.pk }}">{{ other }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
        </p>
    {% endif %}
    {% if character|managed_by:user %}
        <p>
            <a href="{% url "character:change" pk=character.pk %}">Modifier</a>
            &bullet;
            <a href="{% url "character:reset_stats" pk=character.pk %}" id="reset-stats">Réinitialiser les stats</a>
        </p>
    {% endif %}
    <p>
        {{ character.race.name }} {{ character.profile.name }} niv. {{ character.level }}<br>
        {{ character.get_gender_display }}, {{ character.age }} ans, {{ character.height_m }}m, {{ character.weight }}kg (IMC: {{ character.imc|floatformat }})
    </p>
    {% include "character/snippets/character_details/states.html" %}
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-6 col-xl">
            <table id="fight-table" class="table table-hover table-sm">
                <thead>
                    <tr><th scope="col" colspan="2">Attaque</th></tr>
                </thead>
                <tbody class="table-group-divider">
                    <tr>
                        <th scope="row">
                            Initiative divers
                            {% if character|managed_by:user %}
                                <div class="btn-group btn-group-sm float-end" role="group">
                                    <button
                                        hx-get="{% url "character:initiative_misc_change" pk=character.pk %}?value=ko"
                                        hx-target="#initiative-misc"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-outline-danger"><i class="fa-solid fa-battery-empty"></i></button>
                                    <button
                                        hx-get="{% url "character:initiative_misc_change" pk=character.pk %}?value=-1"
                                        hx-target="#initiative-misc"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-danger"><i class="fa-solid fa-minus"></i></button>
                                    <button
                                        hx-get="{% url "character:initiative_misc_change" pk=character.pk %}?value=1"
                                        hx-target="#initiative-misc"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-success"><i class="fa-solid fa-plus"></i></button>
                                    <button
                                        type="button"
                                        disabled
                                        class="btn btn-outline-secondary"><i class="fa-solid fa-battery-full"></i></button>
                                </div>
                            {% endif %}
                        </th>
                        <td id="initiative-misc">
                            {{ character.initiative_misc }}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">Mod. initiative</th>
                        <td data-bs-toggle="tooltip"
                            data-bs-placement="left"
                            data-bs-title="{{ character.modifier_dexterity }} (mod. DEX) + {{ character.initiative_misc }} (divers)"
                            {% if character|managed_by:user %}
                                hx-get="{% url "character:get_initiative" pk=character.pk %}"
                                hx-trigger="update_initiative from:#fight-table"
                            {% endif %}>
                            {{ character.modifier_initiative|modifier }}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">Att. contact</th>
                        <td data-bs-toggle="tooltip"
                            data-bs-placement="left"
                            data-bs-title="{{ character.level }} (niveau) + {{ character.modifier_strength }} (mod. FOR)">
                            {{ character.attack_melee|modifier }}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">Att. distance</th>
                        <td data-bs-toggle="tooltip"
                            data-bs-placement="left"
                            data-bs-title="{{ character.level }} (niveau) + {{ character.modifier_dexterity }} (mod. DEX)">
                            {{ character.attack_range|modifier }}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">Att. magique</th>
                        <td data-bs-toggle="tooltip"
                            data-bs-placement="left"
                            data-bs-title="{{ character.level }} (niveau) + {{ character.attack_magic|sub:character.level }} (mod. {{ character.profile.magical_strength }})">
                            {{ character.attack_magic|modifier }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6 col-xl">
            <table id="fight-table" class="table table-hover table-sm">
                <thead>
                    <tr><th scope="col" colspan="2">Protection</th></tr>
                </thead>
                <tbody class="table-group-divider">
                    <tr>
                        <th scope="row">
                            Armure
                            {% if character|managed_by:user %}
                                <div class="btn-group btn-group-sm float-end" role="group">
                                    <button
                                        hx-get="{% url "character:armor_change" pk=character.pk %}?value=ko"
                                        hx-target="#armor"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-outline-danger"><i class="fa-solid fa-battery-empty"></i></button>
                                    <button
                                        hx-get="{% url "character:armor_change" pk=character.pk %}?value=-1"
                                        hx-target="#armor"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-danger"><i class="fa-solid fa-minus"></i></button>
                                    <button
                                        hx-get="{% url "character:armor_change" pk=character.pk %}?value=1"
                                        hx-target="#armor"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-success"><i class="fa-solid fa-plus"></i></button>
                                    <button
                                        type="button"
                                        disabled
                                        class="btn btn-outline-secondary"><i class="fa-solid fa-battery-full"></i></button>
                                </div>
                            {% endif %}
                        </th>
                        <td id="armor">
                            {{ character.armor }}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">
                            Bouclier
                            {% if character|managed_by:user %}
                                <div class="btn-group btn-group-sm float-end" role="group">
                                    <button
                                        hx-get="{% url "character:shield_change" pk=character.pk %}?value=ko"
                                        hx-target="#shield"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-outline-danger"><i class="fa-solid fa-battery-empty"></i></button>
                                    <button
                                        hx-get="{% url "character:shield_change" pk=character.pk %}?value=-1"
                                        hx-target="#shield"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-danger"><i class="fa-solid fa-minus"></i></button>
                                    <button
                                        hx-get="{% url "character:shield_change" pk=character.pk %}?value=1"
                                        hx-target="#shield"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-success"><i class="fa-solid fa-plus"></i></button>
                                    <button
                                        type="button"
                                        disabled
                                        class="btn btn-outline-secondary"><i class="fa-solid fa-battery-full"></i></button>
                                </div>
                            {% endif %}
                        </th>
                        <td id="shield">
                            {{ character.shield }}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">
                            Divers défense
                            {% if character|managed_by:user %}
                                <div class="btn-group btn-group-sm float-end" role="group">
                                    <button
                                        hx-get="{% url "character:defense_misc_change" pk=character.pk %}?value=ko"
                                        hx-target="#defense-misc"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-outline-danger"><i class="fa-solid fa-battery-empty"></i></button>
                                    <button
                                        hx-get="{% url "character:defense_misc_change" pk=character.pk %}?value=-1"
                                        hx-target="#defense-misc"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-danger"><i class="fa-solid fa-minus"></i></button>
                                    <button
                                        hx-get="{% url "character:defense_misc_change" pk=character.pk %}?value=1"
                                        hx-target="#defense-misc"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-success"><i class="fa-solid fa-plus"></i></button>
                                    <button
                                        type="button"
                                        disabled
                                        class="btn btn-outline-secondary"><i class="fa-solid fa-battery-full"></i></button>
                                </div>
                            {% endif %}
                        </th>
                        <td id="defense-misc">
                            {{ character.defense_misc }}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">Défense</th>
                        <td data-bs-toggle="tooltip"
                            data-bs-placement="left"
                            data-bs-title="10 + armure + bouclier + mod. DEX + divers"
                            {% if character|managed_by:user %}
                                hx-get="{% url "character:get_defense" pk=character.pk %}"
                                hx-trigger="update_defense from:#fight-table"
                            {% endif %}>
                            {{ character.defense }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-sm-12 col-md-8 col-lg-6 col-xl">
            <table class="table table-hover table-sm">
                <thead>
                    <tr><th scope="col" colspan="2">Énergie</th></tr>
                </thead>
                <tbody class="table-group-divider">
                    <tr>
                        <th scope="row">
                            Points de vie
                            {% if character|managed_by:user %}
                                <div class="btn-group btn-group-sm float-end" role="group">
                                    <button
                                        hx-get="{% url "character:health_change" pk=character.pk %}?value=ko"
                                        hx-target="#health-remaining"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-outline-danger"><i class="fa-solid fa-battery-empty"></i></button>
                                    <button
                                        hx-get="{% url "character:health_change" pk=character.pk %}?value=-1"
                                        hx-target="#health-remaining"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-danger"><i class="fa-solid fa-minus"></i></button>
                                    <button
                                        hx-get="{% url "character:health_change" pk=character.pk %}?value=1"
                                        hx-target="#health-remaining"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-success"><i class="fa-solid fa-plus"></i></button>
                                    <button
                                        hx-get="{% url "character:health_change" pk=character.pk %}?value=max"
                                        hx-target="#health-remaining"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-outline-success"><i class="fa-solid fa-battery-full"></i></button>
                                </div>
                            {% endif %}
                        </th>
                        <td><span id="health-remaining">{{ character.health_remaining }}</span> / {{ character.health_max }}</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            {% include "character/snippets/character_details/health_bar.html" %}
                        </td>
                    </tr>
                    {% if character.mana_max > 0 %}
                        <tr>
                            <th scope="row">
                                Points de mana
                                {% if character|managed_by:user %}
                                    <div class="btn-group btn-group-sm float-end" role="group">
                                        <button
                                            hx-get="{% url "character:mana_change" pk=character.pk %}?value=ko"
                                            hx-target="#mana-remaining"
                                            hx-swap="innerHTML"
                                            type="button"
                                            class="btn btn-outline-danger"><i class="fa-solid fa-battery-empty"></i></button>
                                        <button
                                            hx-get="{% url "character:mana_change" pk=character.pk %}?value=-1"
                                            hx-target="#mana-remaining"
                                            hx-swap="innerHTML"
                                            type="button"
                                            class="btn btn-danger"><i class="fa-solid fa-minus"></i></button>
                                        <button
                                            hx-get="{% url "character:mana_change" pk=character.pk %}?value=1"
                                            hx-target="#mana-remaining"
                                            hx-swap="innerHTML"
                                            type="button"
                                            class="btn btn-success"><i class="fa-solid fa-plus"></i></button>
                                        <button
                                            hx-get="{% url "character:mana_change" pk=character.pk %}?value=max"
                                            hx-target="#mana-remaining"
                                            hx-swap="innerHTML"
                                            type="button"
                                            class="btn btn-outline-success"><i class="fa-solid fa-battery-full"></i></button>
                                    </div>
                                {% endif %}
                            </th>
                            <td data-bs-toggle="tooltip"
                                data-bs-placement="left"
                                {% if character.profile.mana_max_compute == 1 %}
                                    data-bs-title="{{ character.level }} (niveau) + {{ character.modifier_magic }} (mod. {{ character.profile.magical_strength }})"
                                {% elif character.profile.mana_max_compute == 2 %}
                                    data-bs-title="2 x {{ character.level }} (niveau) + {{ character.modifier_magic }} (mod. {{ character.profile.magical_strength }})"
                                {% endif %}
                            >
                                <span id="mana-remaining">{{ character.mana_remaining }}</span> / {{ character.mana_max }}
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                {% include "character/snippets/character_details/mana_bar.html" %}
                            </td>
                        </tr>
                    {% endif %}
                    <tr>
                        <th scope="row">
                            Points de récup.
                            {% if character|managed_by:user %}
                                <div class="btn-group btn-group-sm float-end" role="group">
                                    <button
                                        type="button"
                                        disabled
                                        class="btn btn-outline-secondary"><i class="fa-solid fa-battery-empty"></i></button>
                                    <button
                                        hx-get="{% url "character:recovery_points_change" pk=character.pk %}?value=-1"
                                        hx-target="#recovery-points-remaining"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-danger"><i class="fa-solid fa-minus"></i></button>
                                    <button
                                        hx-get="{% url "character:recovery_points_change" pk=character.pk %}?value=1"
                                        hx-target="#recovery-points-remaining"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-success"><i class="fa-solid fa-plus"></i></button>
                                    <button
                                        type="button"
                                        disabled
                                        class="btn btn-outline-secondary"><i class="fa-solid fa-battery-full"></i></button>
                                </div>
                            {% endif %}
                        </th>
                        <td>
                            <span id="recovery-points-remaining">{{ character.recovery_points_remaining }}</span> / {{ character.recovery_points_max }}</td>
                    </tr>
                    <tr>
                        <th scope="row">
                            Points de chance
                            {% if character|managed_by:user %}
                                <div class="btn-group btn-group-sm float-end" role="group">
                                    <button
                                        type="button"
                                        disabled
                                        class="btn btn-outline-secondary"><i class="fa-solid fa-battery-empty"></i></button>
                                    <button
                                        hx-get="{% url "character:luck_points_change" pk=character.pk %}?value=-1"
                                        hx-target="#luck-points-remaining"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-danger"><i class="fa-solid fa-minus"></i></button>
                                    <button
                                        hx-get="{% url "character:luck_points_change" pk=character.pk %}?value=1"
                                        hx-target="#luck-points-remaining"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-success"><i class="fa-solid fa-plus"></i></button>
                                    <button
                                        hx-get="{% url "character:luck_points_change" pk=character.pk %}?value=max"
                                        hx-target="#luck-points-remaining"
                                        hx-swap="innerHTML"
                                        type="button"
                                        class="btn btn-outline-success"><i class="fa-solid fa-battery-full"></i></button>
                                </div>
                            {% endif %}
                        </th>
                        <td data-bs-toggle="tooltip"
                            data-bs-placement="left"
                            data-bs-title="[1 dé de vie + {{ character.modifier_constitution|add:character.level }}] PV">
                            <span id="luck-points-remaining">{{ character.luck_points_remaining }}</span> / {{ character.luck_points_max }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <table class="table table-hover table-sm">
                <thead>
                    <tr>
                        <th scope="col">Carac</th>
                        <th scope="col">Valeur</th>
                        <th scope="col">Mod.</th>
                    </tr>
                </thead>
                <tbody class="table-group-divider">
                    <tr>
                        <th scope="row">FOR</th>
                        <td>{{ character.value_strength }}</td>
                        <td>{{ character.modifier_strength|modifier }}</td>
                    </tr>
                    <tr>
                        <th scope="row">DEX</th>
                        <td>{{ character.value_dexterity }}</td>
                        <td>{{ character.modifier_dexterity|modifier }}</td>
                    </tr>
                    <tr>
                        <th scope="row">CON</th>
                        <td>{{ character.value_constitution }}</td>
                        <td>{{ character.modifier_constitution|modifier }}</td>
                    </tr>
                    <tr>
                        <th scope="row">INT</th>
                        <td>{{ character.value_intelligence }}</td>
                        <td>{{ character.modifier_intelligence|modifier }}</td>
                    </tr>
                    <tr>
                        <th scope="row">SAG</th>
                        <td>{{ character.value_wisdom }}</td>
                        <td>{{ character.modifier_wisdom|modifier }}</td>
                    </tr>
                    <tr>
                        <th scope="row">CHA</th>
                        <td>{{ character.value_charisma }}</td>
                        <td>{{ character.modifier_charisma|modifier }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-8">
            <table class="table table-hover table-sm">
                <thead>
                    <tr>
                        <th scope="col">Arme</th>
                        <th scope="col">Attaque</th>
                        <th scope="col">DM</th>
                        <th scope="col">Spécial</th>
                    </tr>
                </thead>
                <tbody class="table-group-divider">
                    {% for weapon in character.weapons.all %}
                        <tr>
                            <th scope="row">{{ weapon.name }}</th>
                            <td>
                                1D20
                                {{ character|weapon_modifier:weapon }}
                            </td>
                            <td>{{ weapon.damage }}</td>
                            <td>{{ weapon.special }}</td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan="4">Aucune arme</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-lg-4 mb-3">
            <div class="card">
                <h5 class="card-header">{{ character.racial_capability.name }}</h5>
                <div class="card-body">
                    <p class="card-text">{{ character.racial_capability.description|capfirst }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-4 mb-3">
            {% include "character/snippets/character_details/damage_reduction_display.html" %}
        </div>
        <div class="col-md-12 col-lg-4 mb-3">
            {% include "character/snippets/character_details/equipment_display.html" %}
        </div>
    </div>
    {% include "character/snippets/character_details/paths_and_capabilities.html" %}

    {% if character|managed_by:user %}
        {% include "character/snippets/character_details/notes_display.html" %}
    {% endif %}
{% endblock %}