{% load i18n %}
<button class="pf-c-button pf-m-tertiary" data-target="modal" data-modal="oauth-{{ provider.pk }}">{% trans 'View Setup URLs' %}</button>

<div class="pf-c-backdrop" id="oauth-{{ 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" id="modal-title">{% trans 'Setup URLs' %}</h1>
            <div class="pf-c-modal-box__body" id="modal-description">
                <form class="pf-c-form">
                    <div class="pf-c-form__group">
                        <label class="pf-c-form__label" for="help-text-simple-form-name">
                            <span class="pf-c-form__label-text">{% trans 'Authorize URL' %}</span>
                        </label>
                        <input class="pf-c-form-control" readonly type="text" value="{{ authorize_url }}" />
                    </div>
                    <div class="pf-c-form__group">
                        <label class="pf-c-form__label" for="help-text-simple-form-name">
                            <span class="pf-c-form__label-text">{% trans 'Token URL' %}</span>
                        </label>
                        <input class="pf-c-form-control" readonly type="text" value="{{ token_url }}" />
                    </div>
                    <div class="pf-c-form__group">
                        <label class="pf-c-form__label" for="help-text-simple-form-name">
                            <span class="pf-c-form__label-text">{% trans 'Userinfo Endpoint' %}</span>
                        </label>
                        <input class="pf-c-form-control" readonly type="text" value="{{ userinfo_url }}" />
                    </div>
                </form>
            </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>
