{% extends 'base.html.twig' %}

{% block nav_title %}<i class="fas fa-users"></i>&nbsp;&nbsp;<span class="text-danger">Platform</span> - NRPS memberships{% endblock %}

{% block body %}
<div class="card bg-light">
    <div class="card-header d-flex justify-content-between align-items-center">
        <div>
            <i class="fas fa-users"></i>&nbsp;Default membership
        </div>
        <div>
            <div class="btn-group" role="group" aria-label="Basic example">
                <a class="btn btn-info text-white" data-toggle="modal" data-target="#membershipServiceUrlModal" data-nrps-service-url="{{ absolute_app_url('platform_service_nrps', {'contextIdentifier': defaultMembership.context.identifier, 'membershipIdentifier': defaultMembership.identifier}) }}">
                    <i class="fas fa-link"></i>&nbsp;NRPS
                </a>
                <a class="btn btn-primary" href="{{ path('platform_nrps_view_membership', {'membershipIdentifier': defaultMembership.identifier}) }}">
                    <i class="fas fa-info-circle"></i>&nbsp;Details
                </a>
            </div>
        </div>
    </div>
    <div class="card-body">
        <strong>Identifier</strong>: <code>{{ defaultMembership.identifier }}</code>
        &nbsp;-&nbsp;
        <strong>Context</strong>: <code>{{ defaultMembership.context.identifier }}</code>
    </div>
    <div class="card-footer text-muted">
        <small>{{ defaultMembership.members.count }} member(s) from <code>config/devkit/users.yaml</code></small>
    </div>
</div>
<br/>
<div class="card bg-light">
    <div class="card-header d-flex justify-content-between align-items-center">
        <div>
            <i class="fas fa-users"></i>&nbsp;Custom memberships
        </div>
        <a class="btn btn-primary" href="{{ path('platform_nrps_create_membership') }}">
            <i class="fas fa-plus-circle"></i>&nbsp;Create
        </a>
    </div>
    <div class="card-body">
        {% if memberships|length > 0 %}
            <table id="memberships" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
                <thead>
                <tr>
                    <th>Identifier</th>
                    <th>Context</th>
                    <th>Members</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                {% for membership in memberships %}
                    <tr>
                        <td>
                            <code>{{ membership.identifier|truncate }}</code>
                        </td>
                        <td>
                            <code>{{ membership.context.identifier|truncate }}</code>
                        </td>
                        <td>
                            {{ membership.members.count }}
                        </td>
                        <td style="width:1px;white-space:nowrap;">
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <a
                                    class="btn btn-info text-white"
                                    data-dismiss="modal"
                                    data-toggle="modal"
                                    data-target="#membershipServiceUrlModal"
                                    data-nrps-service-url="{{ absolute_app_url('platform_service_nrps', {'contextIdentifier': membership.context.identifier, 'membershipIdentifier': membership.identifier}) }}"
                                >
                                    <i class="fas fa-link"></i>&nbsp;NRPS
                                </a>
                                <a class="btn btn-primary" href="{{ path('platform_nrps_view_membership', {'membershipIdentifier': membership.identifier}) }}">
                                    <i class="fas fa-info-circle"></i>&nbsp;Details
                                </a>
                                <a class="btn btn-danger text-white" href="{{ path('platform_nrps_delete_membership', {'membershipIdentifier': membership.identifier}) }}" onclick="return confirm('Are you sure?')">
                                    <i class="fas fa-trash-alt"></i>&nbsp;Delete
                                </a>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div class="alert alert-dark alert-no-margin-bottom" role="alert">
                <i class="fas fa-ban"></i>&nbsp;No custom memberships available
            </div>
        {% endif %}
    </div>
    <div class="card-footer text-muted">
        <small><code><i class="fas fa-exclamation-triangle"></i>&nbsp;Non persistent cache storage</code></small>
    </div>
</div>
<div class="modal fade" id="membershipServiceUrlModal" tabindex="-1" role="dialog" aria-labelledby="membershipServiceUrlModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <h5 class="modal-title" id="membershipServiceUrlModalLabel"><i class="fas fa-info-circle"></i>&nbsp;Membership NRPS Service URL</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body bg-light">
                <form>
                    <div class="form-group">
                        <textarea class="form-control" id="membershipServiceUrlField" rows="15"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer bg-light">
                <div class="btn-group" role="group" aria-label="Basic example">
                    <button id="membershipServiceUrlCopy" type="button" class="btn btn-info">
                        <i id="membershipServiceUrlCopyLogo" class="fas fa-copy"></i>&nbsp;
                        <span id="membershipServiceUrlCopyText">Copy to clipboard</span>
                    </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i>&nbsp;Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock body %}

{% block scripts %}
    <script>
        $('#membershipServiceUrlModal').on("show.bs.modal", function (event) {
            $("#membershipServiceUrlField").val($(event.relatedTarget).attr("data-nrps-service-url"));
        });

        function copyUrlToClipboard() {

            $('#membershipServiceUrlField').select();
            document.execCommand("copy");

            $('#membershipServiceUrlCopy').removeClass('btn-info');
            $('#membershipServiceUrlCopy').addClass('btn-success');
            $('#membershipServiceUrlCopyLogo').removeClass('fa-copy');
            $('#membershipServiceUrlCopyLogo').addClass('fa-check');
            $('#membershipServiceUrlCopyText').html('Copied !');
            setTimeout(
                function() {
                    $('#membershipServiceUrlCopy').removeClass('btn-success');
                    $('#membershipServiceUrlCopy').addClass('btn-info');
                    $('#membershipServiceUrlCopyLogo').removeClass('fa-check');
                    $('#membershipServiceUrlCopyLogo').addClass('fa-copy');
                    $('#membershipServiceUrlCopyText').html('Copy to clipboard');

                },
                1500
            );
        }

        $("#membershipServiceUrlCopy").click(function(event){
            copyUrlToClipboard();
        });

        {% if memberships|length > 0 %}
        $(document).ready(function() {
            $('#memberships').DataTable(
                {
                    responsive: {
                        details: {
                            display: $.fn.dataTable.Responsive.display.modal( {
                                header: function ( row ) {
                                    var data = row.data();
                                    return 'Membership details';
                                }
                            } ),
                            renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
                                tableClass: 'table'
                            } )
                        }
                    },
                    language: {
                        paginate: {
                            previous: "<",
                            next: ">"
                        }
                    }
                }
            );
        } );
        {% endif %}
    </script>
{% endblock %}