{% extends 'allianceauth/base-bs5.html' %}
{% load i18n %}
{% block page_title %}{{page_title}}{% endblock %}
{% block extra_css %}
<style>
    .flex-container-main {
        margin-top: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        flex-direction: row;
    }

    @keyframes shake-main {
        10%,
        90% {
            transform: translate3d(-1px, 0, 0);
        }

        20%,
        80% {
            transform: translate3d(2px, 0, 0);
        }

        30%,
        50%,
        70% {
            transform: translate3d(-4px, 0, 0);
        }

        40%,
        60% {
            transform: translate3d(4px, 0, 0);
        }
    }

    .error-anim-main {
        animation: shake-main 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        animation-iteration-count: infinite;
    }
</style>
{% endblock %}

{% block content %}
<br/>
<div id="root">
    <div id="app">
        <div id="error-div" class="flex-container-main">
            <div class="text-center">
              <div>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="100"
                  height="100"
                  fill="red"
                  class="bi bi-exclamation-triangle error-anim-main"
                  viewBox="0 0 16 16"
                >
                  <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z" />
                  <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z" />
                </svg>
              </div>
              {% if app_name %}
              <h3>{% blocktranslate %}User "{{ username }}" has no permission to use application "{{ app_name }}".{% endblocktranslate %}</h3>
              {% else %}
              <h3>{% blocktranslate %}User "{{ username }}" has no permission to use OIDC applications.{% endblocktranslate %}</h3>
              {% endif %}
              <p>{% translate "If you believe this is in error please contact the administrators." %} {{ error_code }}</p>
              <p><small>{% translate "This action has been logged" %}</small></p>
              <p><span class="label label-warning">{{ username }}</span> <span class="label label-warning">oidc:authenticate</span></p>
            </div>
          </div>
      </div>
</div>
{% endblock content %}