<?php

use Icinga\Util\Csp;

?>
<!--
    This view provides a workaround to logout from an external authentication provider, in case external
    authentication was configured (the default is to handle authentications internally in Icingaweb2).

    The <a href="http://tools.ietf.org/html/rfc2617">Http Basic and Digest Authentication</a> is not
    designed to handle logout. When the user has provided valid credentials, the client is adviced to include these
    in every further request until the browser was closed. To allow logout and to allow the user to change the
    logged-in user this JavaScript provides a workaround to force a new authentication prompt in most browsers.
-->
<div class="content">
    <div id="icinga-logo" aria-hidden="true"></div>
    <div class="alert alert-warning" id="logout-in-progress">
        <b><?= $this->translate('Logging out...'); ?></b>
        <p>
            <?= $this->translate(
                'If this message does not disappear, it might be necessary to quit the'
                . ' current session manually by clearing the cache, or by closing the current'
                . ' browser session.'
            ); ?>
        </p>
    </div>
    <div id="logout-successful" class="alert alert-success" hidden><?= $this->translate('Logout successful'); ?></div>

    <div class="container">
        <a href="<?= $this->href('dashboard'); ?>"><?= $this->translate('Login'); ?></a>
    </div>
</div>
<script type="text/javascript" src="<?= $this->href('js/logout.js'); ?>"></script>
<style type="text/css" nonce="<?= Csp::getStyleNonce(); ?>">
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        background-color: #0095bf;
        color: white;
    }
    .content {
        text-align: center;
    }

    #icinga-logo {
        background-image: url('../img/icinga-logo-big.svg');
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: contain;
        height: 177px;
        margin-top: 10em;
        width: 100%;
    }

    #logout-in-progress {
        margin: 2em 0 1em;
        font-size: 2em;
        font-weight: bold;
    }

    .container a {
        color: white;
        font-size: 1.5em;
    }
</style>
