<?php

use ipl\I18n\Locale;
use ipl\I18n\GettextTranslator;
use ipl\I18n\StaticTranslator;
use ipl\Web\Widget\Icon;

if (array_key_exists('_dev', $_GET)) {
  $jsfile  = 'js/icinga.dev.js';
  $cssfile = 'css/icinga.css';
} else {
  $jsfile  = 'js/icinga.min.js';
  $cssfile = 'css/icinga.min.css';
}

/** @var GettextTranslator $translator */
$translator = StaticTranslator::$instance;

$lang = (new Locale())->parseLocale($translator->getLocale())->language;
$timezone = date_default_timezone_get();
$isIframe = $this->layout()->isIframe;
$showFullscreen = $this->layout()->showFullscreen;
$iframeClass = $isIframe ? ' iframe' : '';
$innerLayoutScript = $this->layout()->innerLayout . '.phtml';

?><!DOCTYPE html>
<html
    class="no-js<?= $iframeClass ?>" lang="<?= $lang ?>"
    data-icinga-window-name="<?= $this->protectId('Icinga') ?>"
    data-icinga-timezone="<?= $timezone ?>"
    data-icinga-base-url="<?= $this->baseUrl(); ?>"
    <?php if ($isIframe): ?>
        data-icinga-is-iframe
    <?php endif ?>
>
<head>
  <meta charset="utf-8">
  <meta name="google" value="notranslate">
  <meta http-equiv="cleartype" content="on">
  <title><?= $this->title ? $this->escape($this->title) . ' :: ' : '' ?><?= $this->defaultTitle ?></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="application-name" content="Icinga Web 2">
  <meta name="apple-mobile-web-app-title" content="Icinga">
  <link rel="mask-icon" href="<?= $this->baseUrl('img/website-icon.svg') ?>" color="#0096BF">
<?php if ($isIframe): ?>
  <base target="_parent">
<?php else: ?>
  <base href="<?= $this->baseUrl(); ?>/">
<?php endif ?>
  <link rel="stylesheet" href="<?= $this->href($cssfile) ?>" media="all" type="text/css" />
  <link type="image/png" rel="shortcut icon" href="<?= $this->baseUrl('img/favicon.png') ?>" />
  <link rel="apple-touch-icon" href="<?= $this->baseUrl('img/touch-icon.png') ?>">
</head>
<body id="body" class="loading">
<pre id="responsive-debug"></pre>
<div id="layout" class="default-layout<?php if ($showFullscreen): ?> fullscreen-layout<?php endif ?>">
<?= $this->render($innerLayoutScript); ?>
</div>
<div id="collapsible-control-ghost" class="collapsible-control">
    <button type="button">
        <!-- TODO: Accessibility attributes are missing since usage of the Icon class -->
        <?= new Icon('angle-double-down', ['class' => 'expand-icon', 'title' => $this->translate('Expand')]) ?>
        <?= new Icon('angle-double-up', ['class' => 'collapse-icon', 'title' => $this->translate('Collapse')]) ?>
    </button>
</div>
<div id="modal-ghost">
    <div>
        <section class="modal-window">
            <div class="modal-header">
                <h1></h1>
                <button type="button"><?= $this->icon('cancel') ?></button>
            </div>
            <div class="modal-area">
                <div id="modal-content" data-base-target="modal-content" tabindex data-no-icinga-ajax></div>
            </div>
        </section>
    </div>
</div>
<script type="text/javascript" src="<?= $this->href($jsfile) ?>"></script>
<script type="text/javascript" src="<?= $this->href('js/bootstrap.js') ?>"></script>
</body>
</html>
