{% extends 'package_monitor/base.html' %}
{% load i18n %}
{% load humanize %}
{% load static %}

{% block details %}

    <span class="pull-right">
        {% translate "not yet" as never_text %}
        {% translate 'Last updated' %} {{ updated_at|naturaltime|default_if_none:never_text }}&nbsp;&nbsp;
        <button
            type="button"
            class="btn btn-success btn-tabs"
            data-toggle="modal"
            data-target="#modalRefreshingDistributions"
            title="{% translate 'Refresh data now' %}">
            <i class="fas fa-sync"></i>
        </button>
    </span>

    <!-- Modal for Refreshing Distributions -->
    <div class="modal" id="modalRefreshingDistributions" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
        <div class="modal-dialog" role="document">
            <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>
                    <h4 class="modal-title" id="myModalLabel">
                        {% translate "Refreshing distributions" %}
                    </h4>
                </div>
                <div class="modal-body">
                    <p>
                        {% blocktranslate %}
                            Refreshing data for approx. {{ all_count }} distributions...
                        {% endblocktranslate %}
                    </p>
                    <div id="modalLoadInfo">
                        {% if NIGHT_MODE %}
                            <img
                                src="{% static 'package_monitor/images/Spinner-1s-64px-dark.gif' %}"
                                alt="Loading Data">
                        {% else %}
                            <img
                                src="{% static 'package_monitor/images/Spinner-1s-64px-light.gif' %}"
                                alt="Loading Data">
                        {% endif %}
                        <p class="text-muted">

                        </p>
                    </div>
                    <div id="modalLoadError"></div>
                </div>
            </div>
        </div>
    </div>

    <ul class="nav nav-tabs">
        <li role="presentation" class="{% if filter != 'current' and filter != 'outdated' and filter != 'unknown' %}active{% endif %}">
            <a href="{% url 'package_monitor:index' %}?filter=all">
                {% translate "All" %}&nbsp;({{ all_count|default:"-" }})
            </a>
        </li>
        <li role="presentation" class="{% if filter == 'current' %}active{% endif %}">
            <a href="{% url 'package_monitor:index' %}?filter=current">
                {% translate "Current" %}&nbsp;({{ current_count|default:"-" }})
            </a>
        </li>
        <li role="presentation" class="{% if filter == 'outdated' %}active{% endif %}">
            <a href="{% url 'package_monitor:index' %}?filter=outdated">
            {% translate "Update available" %}&nbsp;({{ outdated_count|default:"-" }})
        </a>
        </li>
        <li role="presentation" class="{% if filter == 'unknown' %}active{% endif %}">
            <a  class="dotted_underline"
                href="{% url 'package_monitor:index' %}?filter=unknown"
                title="{% translate 'No information about new release available on PyPI' %}">
                {% translate 'No Info' %}&nbsp;({{ unknown_count|default:"-" }})
            </a>
        </li>
    </ul>

    <div class="panel panel-default panel-tabs">
        <div class="panel-body" style="min-height: 100px;">
            <div class="table-responsive">
                <table id="tab_package_list" class="table table-striped table-responsive-fix">
                    <thead>
                        <tr>
                            <th
                                class="dotted_underline"
                                title="{% translate 'Name of this distribution package' %}">
                                {% translate "Name" %}
                            </th>
                            <th
                                class="dotted_underline"
                                title="{% translate 'Currently installed version of this package' %}">
                                {% translate "Installed" %}
                            </th>
                            <th
                                class="dotted_underline"
                                title="{% translate 'Latest available stable version compliant with all requirements for this package' %}">
                                {% translate "Latest" %}
                            </th>
                            <th>{% translate "Description" %}</th>
                            <th
                                class="dotted_underline"
                                title="{% translate 'Currently installed Django apps included in this package' %}">
                                {% translate "Included Apps" %}
                            </th>
                            <th
                                class="dotted_underline"
                                title="{% translate 'Other distribution packages that are using this package' %}">
                                {% translate "Used By" %}
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
            <br>
            <p class="text-muted">
                {% if show_all_packages %}
                    {% translate "Shows all known distribution packages." %}
                {% else %}
                    {% translate "Shows only distribution packages that contain an installed Django app." %}
                    {% if include_packages %}
                        {% translate "In addition these packages are shown:" %} {{ include_packages|join:", " }}
                    {% endif%}
                {% endif%}
                <br>
                {% blocktranslate %}
                    The latest stable of a package is retrieved from PyPI.
                    Will show as "?" if PyPI has no info about a package.
                {% endblocktranslate %}
            </p>
            {% if outdated_count %}
                <p
                    class="copy_to_clipboard"
                    data-clipboard-text="{{ outdated_install_command }}"
                    title="{{ outdated_install_command }}">
                    {% blocktranslate %}
                        Command for installing all {{ outdated_count }} outdated packages
                    {% endblocktranslate %}
                    &nbsp;&nbsp;
                    <i class="far fa-copy"></i>
                </p>
            {% else %}
                <p class="text-muted">{% translate "No outdated packages to install." %}</p>
            {% endif %}
        </div>
    </div>

{% endblock details %}

{% block extra_javascript %}
    {% include 'bundles/datatables-js.html' %}
    {% include 'bundles/clipboard-js.html' %}

    <script type="text/javascript">

        /** Copy given text to the clipboard */
        const clipboard = new ClipboardJS('.copy_to_clipboard');

        clipboard.on('success', function (e) {
            e.clearSelection();
        });

        clipboard.on('error', function (e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
        });

        $(document).ready(function () {
            /* dataTable def */
            $('#tab_package_list').DataTable({
                ajax: {
                    url: '{% url "package_monitor:package_list_data" %}?filter={{ filter }}',
                    dataSrc: '',
                    cache: false
                },

                columns: [
                    { data: 'name_link' },
                    { data: 'current' },
                    { data: 'latest' },
                    { data: 'description' },
                    { data: 'apps' },
                    { data: 'used_by' }
                ],

                ordering: false,
                info: false,

                columnDefs: [
                    { "sortable": false, "targets": [0, 1, 2, 3, 4] },
                ],

                paging: false,

                rowCallback: function (row, data, index) {
                    if (data['is_outdated']) {
                        $(row).find('td:eq(1)').addClass('warning')
                        $(row).find('td:eq(2)').addClass('warning')
                        $(row).find('td:eq(2)').css('font-weight', 'bold')
                    }
                }

            });

            $('#modalRefreshingDistributions').on('show.bs.modal', function (event) {
                $('#modalLoadError').html("");
                $('#modalLoadInfo').show();
                $.get('{% url "package_monitor:refresh_distributions" %}')
                    .done(() => {
                        window.location.reload(true);
                    })
                    .fail(( jqXHR ) => {
                        $('#modalLoadInfo').hide();
                        console.log(jqXHR);
                        $('#modalLoadError').html(
                            '<p class="text-danger">An unexpected error occured: '
                            + jqXHR.status
                            + ' '
                            + jqXHR.statusText
                            + '</p><p class="text-danger">'
                            + 'Please close this window and try again.</p>'
                        );
                    });
            })
        });
    </script>
{% endblock extra_javascript %}

{% block extra_css %}
    {% include 'bundles/datatables-css.html' %}

    <link rel="stylesheet" href="{% static 'package_monitor/css/global.css' %}" type="text/css" media="screen">
    <link rel="stylesheet" href="{% static 'package_monitor/css/package_list.css' %}" type="text/css" media="screen">
{% endblock extra_css %}

{% block extra_script %}
{% endblock extra_script %}
