{% extends "allianceauth/base-bs5.html" %}

{% load i18n %}

{% block page_title %}
    {% blocktranslate with service_name=view.service_name|title %}{{ service_name }} Credentials{% endblocktranslate %}
{% endblock page_title %}

{% block header_nav_brand %}
    {% translate "Available Services" %}
{% endblock header_nav_brand %}

{% block content %}
    <div>
        <h1 class="page-header text-center mb-3">
            {% blocktranslate with service_name=view.service_name|title %}{{ service_name }} Credentials{% endblocktranslate %}
        </h1>

        <div class="row justify-content-center">
            <div class="col-md-4 align-self-center">
                <form>
                    {% for key, value in credentials.items %}
                        <div class="mb-3">
                            <label class="form-label" for="id_{{ key }}">{{ key|capfirst }}</label>
                            <input class="form-control" value="{{ value }}" id="id_{{ key }}" readonly>
                        </div>
                    {% endfor %}
                </form>

                <a href="{% url 'services:services' %}" class="btn btn-lg btn-block btn-primary" title="Continue">{% translate "Continue" %}</a>
            </div>
        </div>
    </div>
{% endblock %}
