{% load i18n %}
{% load static %}
<div class="pf-c-dropdown">
    <button class="pf-c-button pf-m-tertiary pf-c-dropdown__toggle" type="button">
        <span class="pf-c-dropdown__toggle-text">{% trans 'Setup with...' %}</span>
        <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
    </button>
    <ul class="pf-c-dropdown__menu" hidden>
        <li>
            <button class="pf-c-dropdown__menu-item" data-target="modal" data-modal="docker-compose-{{ provider.pk }}">{% trans 'docker-compose' %}</button>
        </li>
        <li>
            <button class="pf-c-dropdown__menu-item" data-target="modal" data-modal="k8s-{{ provider.pk }}">{% trans 'Kubernetes' %}</button>
        </li>
    </ul>
</div>

<div class="pf-c-backdrop" id="docker-compose-{{ provider.pk }}" hidden>
    <div class="pf-l-bullseye">
        <div class="pf-c-modal-box pf-m-lg" role="dialog">
            <button data-modal-close class="pf-c-button pf-m-plain" type="button" aria-label="Close dialog">
                <i class="fas fa-times" aria-hidden="true"></i>
            </button>
            <h1 class="pf-c-title pf-m-2xl">{% trans 'Setup with docker-compose' %}</h1>
            <div class="pf-c-modal-box__body">
                {% trans 'Add the following snippet to your docker-compose file.' %}
                <textarea class="codemirror" readonly data-cm-mode="yaml">{% include 'app_gw/docker-compose.yml' %}</textarea>
            </div>
            <footer class="pf-c-modal-box__footer pf-m-align-left">
                <button data-modal-close class="pf-c-button pf-m-primary" type="button">{% trans 'Close' %}</button>
            </footer>
        </div>
    </div>
</div>

<div class="pf-c-backdrop" id="k8s-{{ provider.pk }}" hidden>
    <div class="pf-l-bullseye">
        <div class="pf-c-modal-box pf-m-lg" role="dialog">
            <button data-modal-close class="pf-c-button pf-m-plain" type="button" aria-label="Close dialog">
                <i class="fas fa-times" aria-hidden="true"></i>
            </button>
            <h1 class="pf-c-title pf-m-2xl">{% trans 'Setup with Kubernetes' %}</h1>
            <div class="pf-c-modal-box__body">
                <p>{% trans 'Download the manifest to create the Gatekeeper deployment and service:' %}</p>
                <a href="{% url 'passbook_providers_app_gw:k8s-manifest' provider=provider.pk %}">{% trans 'Here' %}</a>
                <p>{% trans 'Afterwards, add the following annotations to the Ingress you want to secure:' %}</p>
                <textarea class="codemirror" readonly data-cm-mode="yaml">
nginx.ingress.kubernetes.io/auth-url: "https://{{ provider.external_host }}/oauth2/auth"
nginx.ingress.kubernetes.io/auth-signin: "https://{{ provider.external_host }}/oauth2/start?rd=$escaped_request_uri"
                </textarea>
            </div>
            <footer class="pf-c-modal-box__footer pf-m-align-left">
                <button data-modal-close class="pf-c-button pf-m-primary" type="button">{% trans 'Close' %}</button>
            </footer>
        </div>
    </div>
</div>
