{% extends "core/navigation.html" %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.css">
{% endblock %}

{% block content %}
    <p class="h5 text-break">{{ title }}</p>
    <p class="h5 text-break">{{ track_count }} tracks</p>
    {% if deleted_track_count %}
        <p class="h5 text-break text-danger">{{ deleted_track_count }} deleted
            track{{ deleted_track_count|pluralize }}</p>
    {% endif %}
    {% if unavailable_track_count %}
        <p class="h5 text-break text-warning">{{ unavailable_track_count }} unavailable
            track{{ unavailable_track_count|pluralize }}</p>
    {% endif %}
    <div id="tracks-table" class="table-borderless table-sm"></div>

{% endblock %}

{% block javascript %}

    <!-- The last place where jQuery is used, hopefully bootstrap-table gets rid of it soon -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.js"></script>

    <script type="text/javascript">
        var tableData = {{ tracks_json | safe }};

        $('#tracks-table').bootstrapTable({
            sortReset: true,
            sortStable: true,
            search: true,
            searchHighlight: true,
            searchAlign: "left",
            rowStyle: "rowStyle",
            columns: [
                {title: "Thumbnail", field: "thumbnail", formatter: "imageFormatter", searchable: false},
                {title: "Title", field: "title", sortable: true, searchable: true},
                {title: "Artist", field: "artist", sortable: true, searchable: true},
                {title: "Duration", field: "duration", sortable: true, searchable: false},
                {
                    title: "Added",
                    field: "date_added",
                    formatter: "dateAddedNaturalFormatter",
                    sortable: true,
                    searchable: false
                },
                {title: "Status", field: "status", sortable: true, searchable: true},
            ],
            data: tableData
        })

        function imageFormatter(value, row) {
            return `<a href="${row.url}"><img src=${value} style="object-fit: cover; height: 45px; width: 80px"></a>`
        }

        function dateAddedNaturalFormatter(value, row) {
            return row.date_added_natural;
        }

        function rowStyle(row, index) {
            if (row.status === "Deleted") {
                return {
                    css: {"color": "var(--danger)"}
                };
            } else if (row.status === 'Unavailable') {
                return {
                    css: {"color": "var(--warning)"}
                };
            }
            return {};
        }

    </script>
{% endblock %}