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

{% if character.character_id %}
    <h4 class="d-none" id="modal-title">
        {{ title }}:
        <img src="{{ character.character_id|character_portrait_url:32 }}" class="rounded-circle">
        {{ character.character_name }}
    </h4>
    {% if skillqueue %}
        <header class="card-header bg-primary rounded-top">
            <h3 class="me-3">{% trans "Skillqueue" %}</h3>
        </header>
        <div class="card-body bg-secondary rounded-bottom mb-3">
            <table class="table table-dark table-striped w-100" id="skillfarm-skillqueue">
                <thead>
                    <tr>
                        <th scope="col">{% translate "Skill" %}</th>
                        <th scope="col">{% translate "Progress" %}</th>
                        <th scope="col">{% translate "Start Date" %}</th>
                        <th scope="col">{% translate "Finish Date" %}</th>
                    </tr>
                </thead>
                <tbody class="modal-payments-table-body">
                    {% for skill in skillqueue %}
                        <tr>
                            <td>{{ skill.skill }}</td>
                            <td>{{ skill.progress.html }}</td>
                            <td>{{ skill.start_date }}</td>
                            <td>{{ skill.finish_date }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <script>
            $(document).ready(() => {
                const SkillQueue = $('#skillfarm-skillqueue');
                const SkillQueueTable = SkillQueue.DataTable({
                    "order": [[ 2, "asc" ]],
                    "columnDefs": [
                        {
                            "orderable": false,
                            "targets": 1
                        }
                    ]
                });
            });
        </script>
    {% endif %}
    {% if skillqueue_filtered %}
        <header class="card-header bg-primary rounded-top">
            <h3 class="me-3">{% trans "Skillqueue Filtered" %}</h3>
        </header>
        <div class="card-body bg-secondary rounded-bottom mb-3">
            <table class="table table-dark table-striped w-100" id="skillfarm-skillqueue-filtered">
                <thead>
                    <tr>
                        <th scope="col">{% translate "Skill" %}</th>
                        <th scope="col">{% translate "Progress" %}</th>
                        <th scope="col">{% translate "Start Date" %}</th>
                        <th scope="col">{% translate "Finish Date" %}</th>
                    </tr>
                </thead>
                <tbody class="modal-payments-table-body">
                    {% for skill in skillqueue_filtered %}
                        <tr>
                            <td>{{ skill.skill }}</td>
                            <td>{{ skill.progress.html }}</td>
                            <td>{{ skill.start_date }}</td>
                            <td>{{ skill.finish_date }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <script>
            $(document).ready(() => {
                const SkillQueueFiltered = $('#skillfarm-skillqueue-filtered');
                const SkillQueueFilteredTable = SkillQueueFiltered.DataTable({
                    "order": [[ 3, "asc" ]],
                    "columnDefs": [
                        {
                            "orderable": false,
                            "targets": 1
                        }
                    ]
                });
            });
        </script>
    {% endif %}
    {% if skills %}
        <header class="card-header bg-primary rounded-top">
            <h3 class="me-3">{% trans "Skills" %}</h3>
        </header>
        <div class="card-body bg-secondary rounded-bottom mb-3">
            <table class="table table-dark table-striped w-100" id="skillfarm-skills">
                <thead>
                    <tr>
                        <th scope="col">{% translate "Skill" %}</th>
                        <th scope="col">{% translate "Level" %}</th>
                        <th scope="col">{% translate "Skillpoints" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for skill in skills %}
                        <tr class="{% if skill.level == 5 %}table-stripe-red{% endif %}">
                            <td>{{ skill.skill }}</td>
                            <td>{{ skill.level }}</td>
                            <td>{{ skill.skillpoints }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <script>
            $(document).ready(() => {
                const Skills = $('#skillfarm-skills');
                const SkillsTable = Skills.DataTable({
                    "order": [[ 1, "desc" ]],
                    columnDefs: [
                        {
                            "targets": 2,
                            "render": function ( data, type, row ) {
                                if (type === 'display') {
                                    return parseInt(data).toLocaleString();
                                }
                                return data;
                            }
                        }
                    ]
                });
            });
        </script>
    {% endif %}
{% else %}
    {% translate "No character found." %}
{% endif %}
