<dp-opinion-war class="war-card" uid="{{ _war.uid }}" topic="public.battle.{{ _war.uid }}" seq="{{ _war.last_seq }}" ends-at="{{ _war.ends_at }}" status="{{ _war.status }}">
    <div class="war-head">
        <span class="war-head-title"><span class="icon" aria-hidden="true">&#x2694;&#xFE0E;</span> Opinion War</span>
        <span class="war-countdown" data-war-countdown>{% if _war.status == 'active' %}Battle ends in {{ _war.ends_in }}{% else %}Battle ended{% endif %}</span>
    </div>

    <div class="war-bars">
        <div class="war-side war-side-a">
            <span class="war-side-name">{{ render_title(_war.faction_a) }}</span>
            <div class="war-bar war-bar-a"><span class="war-bar-fill" data-war-bar-a style="--war-pct: {{ _war.pct_a }}%;"></span><span class="war-bar-pct" data-war-pct-a>{{ _war.pct_a }}%</span></div>
            <span class="war-side-hp"><span data-war-hp-a>{{ "{:,}".format(_war.hp_a) }}</span> HP</span>
        </div>
        <span class="war-vs" aria-hidden="true">VS</span>
        <div class="war-side war-side-b">
            <span class="war-side-name">{{ render_title(_war.faction_b) }}</span>
            <div class="war-bar war-bar-b"><span class="war-bar-fill" data-war-bar-b style="--war-pct: {{ _war.pct_b }}%;"></span><span class="war-bar-pct" data-war-pct-b>{{ _war.pct_b }}%</span></div>
            <span class="war-side-hp"><span data-war-hp-b>{{ "{:,}".format(_war.hp_b) }}</span> HP</span>
        </div>
    </div>

    {% include "_opinion_war_field.html" %}

    <div class="war-victory" data-war-victory{% if _war.status != 'resolved' %} hidden{% endif %}>
        <span class="war-victory-title" data-war-victory-title>
            {%- if _war.winner == 'draw' -%}
            It's a draw at {{ "{:,}".format(_war.hp_a) }} HP each
            {%- elif _war.winner_label -%}
            {{ _war.winner_label }} wins the war!
            {%- endif -%}
        </span>
    </div>

    {% if _war.viewer %}
    <div class="war-mine" data-war-mine>
        <span class="war-mine-faction war-tag-{{ _war.viewer.faction }}">{{ render_title(_war.viewer.faction == 'a' and _war.faction_a or _war.faction_b) }}</span>
        <span class="war-mine-stats">Rank #{{ _war.viewer.rank }} &middot; <span data-war-mine-hp>{{ "{:,}".format(_war.viewer.hp) }}</span> HP dealt</span>
    </div>
    {% endif %}

    {% if _war.status == 'active' %}
    <div class="war-actions" data-war-actions>
        {% if not _war.viewer %}
        <form method="POST" action="/battles/{{ _war.uid }}/join" data-war-action="join" class="war-join-form">
            <input type="hidden" name="faction" value="a">
            <button type="submit" class="btn btn-secondary btn-sm war-join-btn war-join-a"{{ guest_disabled(user) }}>Join {{ render_title(_war.faction_a) }}</button>
        </form>
        <form method="POST" action="/battles/{{ _war.uid }}/join" data-war-action="join" class="war-join-form">
            <input type="hidden" name="faction" value="b">
            <button type="submit" class="btn btn-secondary btn-sm war-join-btn war-join-b"{{ guest_disabled(user) }}>Join {{ render_title(_war.faction_b) }}</button>
        </form>
        {% else %}
        <form method="POST" action="/battles/{{ _war.uid }}/fight" data-war-action="fight" class="war-fight-form">
            <button type="submit" class="btn btn-primary war-fight-btn" data-war-fight{% if not _war.viewer.can_fight %} disabled data-war-ready-at="{{ _war.viewer.next_fight_at }}"{% endif %}>
                {%- if _war.viewer.can_fight %}Fight ({{ _war.fight_cost }} coins){% else %}On cooldown{% endif -%}
            </button>
        </form>
        <form method="POST" action="/battles/{{ _war.uid }}/join" data-war-action="join" data-war-confirm="Switch to {{ _war.viewer.faction == 'a' and _war.faction_b or _war.faction_a }}? Damage you already dealt stays with its faction." class="war-switch-form">
            <input type="hidden" name="faction" value="{{ _war.viewer.faction == 'a' and 'b' or 'a' }}">
            <button type="submit" class="btn btn-secondary btn-sm war-switch-btn">Switch faction</button>
        </form>
        {% endif %}
    </div>
    {% endif %}

    {% if _war.top_contributors %}
    <div class="war-contributors">
        <span class="war-block-label">Top contributors</span>
        <ul class="war-contributor-list">
            {% for fighter in _war.top_contributors %}
            <li class="war-contributor">
                {% set _user = fighter %}{% set _size = 24 %}{% set _size_class = "sm" %}{% include "_avatar_link.html" %}
                {% set _user = fighter %}{% include "_user_link.html" %}
                <span class="war-contributor-hp war-text-{{ fighter.faction }}">{{ "{:,}".format(fighter.hp) }} HP</span>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    <div class="war-events">
        <span class="war-block-label">Live events</span>
        <ul class="war-ticker" data-war-ticker>
            {% for e in _war.recent_events %}
            <li class="war-event war-event-{{ e.kind }}"><span class="war-event-dot war-dot-{{ e.faction or 'n' }}" aria-hidden="true"></span><span class="war-event-message">{{ e.message }}</span><span class="war-event-time">{{ dt_ago(e.created_at) }}</span></li>
            {% else %}
            <li class="war-event war-event-empty">No battle activity yet - be the first to fight!</li>
            {% endfor %}
        </ul>
    </div>

    <div class="war-foot">
        <a href="/battles" class="war-all-link"><span class="icon" aria-hidden="true">&#x2694;&#xFE0E;</span> View All Battles</a>
        {% set _type = "battle" %}{% set _uid = _war.uid %}{% set _owner = _war.author.uid %}{% set _owner_name = _war.author.username %}{% set _class = "war-foot-btn" %}{% include "_report_button.html" %}
    </div>
</dp-opinion-war>
