{% load i18n %}
{% load humanize %}
{% load static %}
<!-- Style -->
<style>
    @media (min-width: 768px) {
        .dl-horizontal dt {
            float: left;
            width: 140px;
            clear: left;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: 8px;
        }
        .dl-horizontal dd {
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
</style>

<div class="card d-none" id="lookup-{{ mode }}">
    <div class="card-header bg-primary text-center" id="title"><h3>Overview</h3></div>
    <div class="card-body d-flex">
        <!-- Bildbereich -->
        <div class="text-center" id="portrait-{{ mode }}">
        </div>
        <div class="card-body">
            <div class="row">
                <!-- Main Info -->
                <div class="col-md-8 w-auto" id="info-panel-{{ mode }}">
                    <dl class="dl-horizontal">
                        <dt>{% trans "Charakter" %}:</dt>
                        <dd class="nowrap" id="character_name-{{ mode }}"></dd>
                    </dl>

                    <dl class="dl-horizontal">
                        <dt>More:</dt>
                        <dd class="nowrap" id="get_template-{{ mode }}"></dd>
                    </dl>
                </div>
                <!-- Costs Info -->
                <div class="col-md-8 w-auto" id="info-costs-panel-{{ mode }}">

                    <dl class="dl-horizontal">
                        <dt>{% trans "Ratting" %}:</dt>
                        <dd class="nowrap" id="amount_ratting-{{ mode }}"></dd>
                    </dl>

                    <dl class="dl-horizontal">
                        <dt>{% trans "ESS Payout" %}:</dt>
                        <dd class="nowrap" id="amount_ess-{{ mode }}"></dd>
                    </dl>

                    <dl class="dl-horizontal">
                        <dt>{% trans "Mining" %}:</dt>
                        <dd class="nowrap" id="amount_mining-{{ mode }}"></dd>
                    </dl>

                    <dl class="dl-horizontal">
                        <dt>{% trans "Misc" %}:</dt>
                        <dd class="nowrap" id="amount_misc-{{ mode }}"></dd>
                    </dl>

                    <dl class="dl-horizontal">
                        <dt>{% trans "Costs" %}:</dt>
                        <dd class="nowrap" id="amount_costs-{{ mode }}"></dd>
                    </dl>

                    <dl class="dl-horizontal">
                        <dt>{% trans "Summary" %}:</dt>
                        <dd class="nowrap" id="amount_summary-{{ mode }}"></dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>
