{% load i18n %}

<div class="card card-primary mb-3">
    <div class="card-header">
        <div class="card-title mb-0">
            {% translate "Character Base Skill Checks" %}
        </div>
    </div>

    <div class="card-body">
        <div
        class="alert alert-warning"
        style="-webkit-animation: progress-bar-stripes 2s linear infinite;
                animation: progress-bar-stripes 2s linear infinite;
                animation-direction: alternate;
                background-image: linear-gradient(
                    45deg,
                    rgba(255, 255, 255, 0.15) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, 0.15) 50%,
                    rgba(255, 255, 255, 0.15) 75%,
                    transparent 75%,
                    transparent 50%
                );
                background-size: 40px 40px"
    >
        <p class="text-center m-0">
            {% translate "Basic skills required to <b>sit in the hull</b> and <b>fit the modules</b>." %}
            <br>
            {% translate "Extra skills <b>will</b> be required to use this fitting properly in fleets" %}.
        </p>
    </div>

        {% for c, d in skills.chars.items %}
            <p>
                {{ c }}
                <span class="float-end">
                    <span class="badge {% if d.doctrines.fit|length > 1 %}bg-danger{% else %}bg-success{% endif %}">
                        <span class="fa-solid {% if d.doctrines.fit|length > 1 %}fa-times{% else %}fa-check{% endif %} fa-fw"></span>
                    </span>
                </span>
            </p>
        {% endfor %}
    </div>
</div>

<div class="card card-primary mb-3">
    <div class="card-header">
        <div class="card-title mb-0">
            {% translate "Base Skills Required" %}
        </div>
    </div>

    <div class="card-body">
        <div
            class="alert alert-warning"
            style="-webkit-animation: progress-bar-stripes 2s linear infinite;
                    animation: progress-bar-stripes 2s linear infinite;
                    animation-direction: alternate;
                    background-image: linear-gradient(
                        45deg,
                        rgba(255, 255, 255, 0.15) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(255, 255, 255, 0.15) 50%,
                        rgba(255, 255, 255, 0.15) 75%,
                        transparent 75%,
                        transparent 50%
                    );
                    background-size: 40px 40px"
        >
            <p class="text-center m-0">
                {% translate "Basic skills required to <b>sit in the hull</b> and <b>fit the modules</b>." %}
                <br>
                {% translate "Extra skills <b>will</b> be required to use this fitting properly in fleets" %}.
            </p>
        </div>

        {% for s in skills.skills %}
            <p>
                {{ s.n }}
                <span class="float-end">&nbsp;{{ s.l | floatformat:"-10" }}</span>
            </p>
        {% endfor %}
    </div>
</div>
