{% load humanize %}
{% load i18n %}

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">
                &times;
            </span>
        </button>

        <div style="display: flex; flex-wrap: nowrap;">
            <div style="margin-right: 1rem;">
                <p class="text-center">
                    <img width="64" height="64" src="{{ ship_url }}" />
                </p>
            </div>

            <div style="margin-right: 1rem; margin-left: 1rem; flex-grow: 1;">
                <div class="row">
                    <h4 id="myModalLabel">{{ name }}</h4>
                </div>

                <div class="row">
                    {% if met_all_required %}
                        <p><span class="{{ icon_met_all_required }}"></span>&nbsp;{% translate 'You meet all the required skills.' %}</p>
                    {% else %}
                        <p><span class="{{ icon_failed }}"></span>&nbsp;{% translate 'You do not meet the skill requirements' %}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="modal-body">
        {% if description %}
            <div class="skillset-description">
                <p><b>{% translate 'Description' %}</b></p>
                {{ description|linebreaks|urlize }}
            </div>
        {% endif %}

        <table class="table table-striped table-width-fix" id="skill_set_details">
            <thead>
                <tr>
                    <th>{% translate 'Name' %}</th>
                    <th class="text-center">{% translate 'Required' %}</th>
                    <th class="text-center">{% translate 'Recommended' %}</th>
                    <th class="text-center">{% translate 'Current' %}</th>
                    <th></th>
                </tr>
            </thead>

            <tbody>
                {% for skill in skills %}
                    <tr>
                        <td>{{ skill.name }}</td>
                        <td class="text-center">{{ skill.required }}</td>
                        <td class="text-center">{{ skill.recommended }}</td>
                        <td class="text-center">{{ skill.current }}</td>
                        <td class="{{ skill.result_icon }}"></td>
                    </tr>
                {% endfor %}

            </tbody>
        </table>
        <div id="div-missing-skills" class="hidden">{{ missing_skills_str }}</div>
        {% if missing_skills_str %}
            <button type="button" id="btn-copy-missing-skills" class="btn btn-default pull-right" data-text="{{ missing_skills_str }}">
                {% translate 'Copy missing skills to clipboard' %}
            </button>
        {% endif %}
        <div>
            <p class="text-muted">{% translate 'Legend:' %}</p>
            <p class="text-muted"><span class="{{ icon_failed }}"></span>&nbsp;
                {% translate 'Below minimum requirements' %}
            </p>
            <p class="text-muted"><span class="{{ icon_partial }}"></span>&nbsp;
                {% translate 'Above required, but below recommended level' %}
            </p>
            <p class="text-muted"><span class="{{ icon_full }}"></span>&nbsp;
                {% translate 'At/Above recommended level' %}
            </p>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
            {% translate 'Close' %}
        </button>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#btn-copy-missing-skills').click(function (event) {
            const text = event.currentTarget.getAttribute("data-text");
            navigator.clipboard.writeText(text);
        });
    });
</script>
