{% extends 'layout.html' %}
{% load static %}
{% load humanize %}

{% block title %}Install {{ port.name }} on macOS with {% endblock %}

{% block content %}
    <div class="container shadow-sm rounded-lg mt-5 py-4" style="max-width: 900px">
        <h1 class="text-center display-4 font-weight-bold mb-0">{{ port.name }}</h1>
        <p class="text-center text-secondary mt-1 pt-0">
            <span class="f12">v</span> <span class="lead" style="font-size: 1.3rem">{{ port.version }}</span>
            {% if port.version_updated_at %}
                <span class="text-secondary" style="font-size: 0.9rem"><ins>Updated: {{ port.version_updated_at|naturaltime }}</ins></span>
            {% endif %}
        </p>

        <p class="text-center lead" style="font-size: 1.5rem">{{ port.description }}</p>
        {% include 'port/includes/full-description-collapsible.html' with ld=port.long_description d=port.description %}
        <p class="text-center"><a href="{{ port.homepage }}">{{ port.homepage }}</a></p>

        {% if port.active == True and port.replaced_by == None %}
            {% if not port.is_stubport %}
            <div class="text-center mt-4">
                <p class="text-muted mb-1">To install {{ port.name }}, paste this into the macOS Terminal after <a href="https://www.macports.org/install.php">installing MacPorts</a></p>
                <div style="display: inline-block" class="text-center bg-light rounded-lg py-3 px-2 mt-3">
                    <code id="install" class="text-dark lead">sudo port install {{ port.name }}</code>
                    <button onclick="copyText('install')" class="btn btn-outline-secondary btn-sm ml-2">Copy</button>
                </div>
                    <br>
                <button class="btn btn-link text-secondary" data-toggle="modal" data-target="#instructions">More instructions
                </button>
                <button class="btn text-secondary" data-toggle="modal" data-target="#report-an-issue">
                    <i class="text-secondary fas fa-exclamation-circle"></i> Report an issue with this port
                </button>
                <div class="modal fade" id="instructions" tabindex="-1" role="dialog" aria-labelledby="insLabel"
                     aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="insLabel">Instructions</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body text-left">
                                <ul>
                                    <li class="py-2">If not done already, <a href="https://www.macports.org/install.php">install MacPorts</a>.</li>
                                    <li class="py-2">To <strong>install</strong> {{ port.name }}, run the following command in macOS terminal (Applications->Utilities->Terminal)<br>
                                        <div style="display: inline-block" class="bg-light rounded-lg py-3 px-2 mt-2">
                                            <code id="install-2" class="text-dark">sudo port install {{ port.name }}</code>
                                            <button onclick="copyText('install-2')" class="btn btn-outline-secondary btn-sm ml-2">Copy</button>
                                        </div>
                                    </li>
                                    <li class="py-2">
                                        To see what <strong>files</strong> were installed by {{port.name}}, run:<br>
                                        <div style="display: inline-block" class="bg-light rounded-lg py-3 px-2 mt-2">
                                            <code id="contents" class="text-dark">port contents {{ port.name }}</code>
                                            <button onclick="copyText('contents')" class="btn btn-outline-secondary btn-sm ml-2">Copy</button>
                                        </div>
                                    </li>
                                    <li class="py-2">
                                        To later <strong>upgrade</strong> {{port.name}}, run:<br>
                                        <div style="display: inline-block" class="bg-light rounded-lg py-3 px-2 mt-2">
                                            <code id="upgrade" class="text-dark">sudo port selfupdate && sudo port upgrade {{port.name}}</code>
                                            <button onclick="copyText('upgrade')" class="btn btn-outline-secondary btn-sm ml-2">Copy</button>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="report-an-issue" tabindex="-1" role="dialog" aria-labelledby="insLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="insLabel">Reporting an issue on MacPorts Trac</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body text-left">
                                The MacPorts Project uses a system called Trac to file tickets to report bugs and enhancement requests.
                                Though anyone may search Trac for tickets, <strong>you must have a GitHub account</strong> in order to login to Trac to create tickets.<br><br>
                                <div class="text-center mt-4">
                                        <a target="_blank" href="https://trac.macports.org/newticket?port={{ port.name }}" class="btn btn-primary">Report an Issue on MacPorts Trac</a>
                                        (GitHub login required)
                                    </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% else %}
                <h4 class="text-center border-bottom">Installable ports:</h4>
                {% with subports=port.get_subports %}
                    {% if subports %}
                        <div class="row px-5">
                            {% for subport in subports %}
                                <div class="col-3">
                                    <a href="{% url 'port_detail' subport.name %}">{{ subport.name }}</a><br>
                                </div>
                            {% endfor %}
                        </div>
                        <br>
                    {% endif %}
                {% endwith %}
            {% endif %}
        {% elif port.active is False %}
        <div class="alert alert-danger text-center" role="alert">
            This port has been deleted. This page will exist till another port with the name "{{ port.name }}" comes
            into existence.
        </div>
        {% elif port.replaced_by %}
        <div class="alert alert-warning" role="alert">
            This port is obsolete. It has been replaced by <a href="{% url 'port_detail' port.replaced_by %}">{{ port.replaced_by }}</a>.
        </div>
        {% endif %}

        <div>
            <div class="btn-group px-0 mx-0" role="group" aria-label="Basic example">
                <a href="{% url 'port_details' port.name %}" class="btn btn-primary">Details</a>
            </div>
            <span class="float-right">
            {% if is_followed %}
                <a href="{% url 'unfollow_port' port.name %}" class="btn btn-light"><i class="fa fa-minus-circle"></i> Unfollow</a>
            {% else %}
                <a href="{% url 'follow_port' port.name %}" class="btn btn-light"><i class="fa fa-plus"></i> Add to my watchlist</a>
            {% endif %}
                <button class="btn btn-light" disabled>{{ port.subscribers.count|intcomma }}</button>
            </span>
        </div>
        <br>
        <div>
            <table class="table table-striped lead">
                <tr>
                    <td>Installations</td>
                    <td>{{ count.all|intcomma }}</td>
                </tr>
                 <tr>
                    <td>Requested Installations</td>
                    <td>{{ count.requested|intcomma }}</td>
                </tr>
            </table>
        </div>

    </div>
{% endblock %}

{% block script %}
    <script>
        function copyText(eleId) {
            /* Get the text field */
            let elm = document.getElementById(eleId);

            if (document.body.createTextRange) {
                var range = document.body.createTextRange();
                range.moveToElementText(elm);
                range.select();
                document.execCommand("Copy");
            } else if (window.getSelection) {
                // other browsers

                var selection = window.getSelection();
                var range = document.createRange();
                range.selectNodeContents(elm);
                selection.removeAllRanges();
                selection.addRange(range);
                document.execCommand("Copy");
            }
        }
    </script>
{% endblock %}