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

{% block details %}

    <span class="pull-right">        
        Last updated {{ updated_at|naturaltime|default_if_none:"never" }}&nbsp;&nbsp;
        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modalRefreshingDistributions" title="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">Refreshing distributions...</h4>
                </div>
                <div class="modal-body">
                    <p>Refreshing data for approx. {{ all_count }} distributions.<br>This can take a minute. Please wait.</p>
                    <div id="modalLoadInfo">
                        <img src="{% static 'package_monitor/Spinner-1s-64px.gif' %}"/>                    
                        <p class="text-muted">When completed this window will automatically close and the page will reload.</p>
                    </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">All&nbsp;({{ all_count|default:"-" }})</a>
        </li>
        <li role="presentation" class="{% if filter == 'current' %}active{% endif %}">
            <a href="{% url 'package_monitor:index' %}?filter=current">Current&nbsp;({{ current_count|default:"-" }})</a>
        </li>
        <li role="presentation" class="{% if filter == 'outdated' %}active{% endif %}">
            <a href="{% url 'package_monitor:index' %}?filter=outdated">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="No information about new release available on PyPI">
                No Info&nbsp;({{ unknown_count|default:"-" }})
            </a>
        </li>
    </ul>

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

{% block extra_javascript %}
    {% include 'bundles/datatables-js.html' %}    
    <script type="text/javascript" src="{% static 'js/filterDropDown/filterDropDown.min.js' %}"></script>

    <script type="text/javascript">
        
        function copyToClipboard(text) {
            if (window.clipboardData && window.clipboardData.setData) {
                // IE specific code path to prevent textarea being shown while dialog is visible.
                return clipboardData.setData("Text", text); 

            } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
                var textarea = document.createElement("textarea");
                textarea.textContent = text;
                textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
                document.body.appendChild(textarea);
                textarea.select();
                try {
                    return document.execCommand("copy");  // Security exception may be thrown by some browsers.
                } catch (ex) {
                    console.warn("Copy to clipboard failed.", ex);
                    return false;
                } finally {
                    document.body.removeChild(textarea);
                }
            }
        }

        $(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')
                    }
                }

            });

            $('#tab_package_list').on('click', '.copy_to_clipboard', function (event) {
                var text = event.currentTarget.getAttribute("data-text")
                copyToClipboard(text)
            });

            $('#modalRefreshingDistributions').on('show.bs.modal', function (event) {                
                $.get('{% url "package_monitor:refresh_distributions" %}', function (data, status, request) {
                    if (status == "success") {
                        window.location.reload(true)
                    }
                    else {                        
                        $('#modalLoadInfo').html(
                            '<p class="text-danger">An unexpected error occured. HTTP code: ' 
                            + request.status 
                            + '</p>'
                        )
                    }

                });
            })
        });
    </script>
{% endblock extra_javascript %}

{% block extra_css %}    
    {% include 'bundles/datatables-css.html' %}
    
    <link rel="stylesheet" href="{% static 'package_monitor/package_list.css' %}" type="text/css" media="screen">    
{% endblock extra_css %}

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