<!doctype html>
<html lang="<?= \F3::get('language'); ?>">
<head>
    <base href="<?= $this->base; ?>" />

    <meta charset="utf-8">

    <title><?= trim(\F3::get('html_title')); ?></title>

    <meta name="description" content="selfoss" />
    <meta name="author" content="Tobias Zeising" />
    <meta name="version" content="<?= \F3::get('version'); ?>" />
    <meta name="referrer" content="no-referrer" />

    <!--  Mobile viewport optimized: j.mp/bplateviewport -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />

    <!--  Add support for fullscreen Webapp on iPhone 5 -->
    <meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1" media="(device-height: 568px)" />

    <!-- Web application behavior -->
    <meta name="application-name" content="selfoss" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />

    <!-- app tile and notification when adding link to Windows 8 start screen -->
    <meta name="msapplication-TileColor" content="#3d6d69" />
    <meta name="msapplication-square70x70logo" content="<?= $this->base; ?>win8-70-icon.png" />
    <meta name="msapplication-square150x150logo" content="<?= $this->base; ?>win8-150-icon.png" />
    <meta name="msapplication-wide310x150logo" content="<?= $this->base; ?>win8-150-icon.png" />
    <meta name="msapplication-square310x310logo" content="<?= $this->base; ?>win8-310-icon.png" />
    <meta name="msapplication-notification" content="cycle=1; frequency=30; polling-uri=<?= $this->base; ?>win8notifs" />
    <meta name="msapplication-badge" content="frequency=30; polling-uri=<?= $this->base; ?>badge" />

    <!--  RSS Feed -->
    <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="feed" />

    <!-- icons -->
    <link rel="apple-touch-icon-precomposed" href="icon-128x128.png" />
    <link rel="icon" type="image/png" href="icon-32x32.png" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

    <!-- Toolbar color from Chrome for Android -->
    <meta name="theme-color" content="#191718" />

    <!-- all css definitions -->
    <?php if (\F3::get('use_system_font') != true) : ?>
        <link rel="stylesheet" href="css/fonts.css" />
    <?php endif; ?>
    <link rel="stylesheet" href="<?= \helpers\View::getGlobalCssFileName(); ?>" />

</head>
<body class="
    <?= $this->publicMode === true ? 'publicmode' : ''; ?>
    <?= $this->authEnabled === true ? 'authenabled' : 'loggedin'; ?>
    <?= \F3::get('auto_mark_as_read') == 1 ? 'auto_mark_as_read' : ''; ?>
">

    <div id="message"></div>

    <!-- language settings for jQuery -->
    <span id="lang"
        data-mark="<?= \F3::get('lang_mark'); ?>"
        data-unmark="<?= \F3::get('lang_unmark'); ?>"
        data-star="<?= \F3::get('lang_star'); ?>"
        data-unstar="<?= \F3::get('lang_unstar'); ?>"
        data-source_warn="<?= \F3::get('lang_source_warn'); ?>"
        data-source_saved="<?= \F3::get('lang_source_saved'); ?>"
        data-source_edit="<?= \F3::get('lang_source_edit'); ?>"
        data-seconds="<?= \F3::get('lang_seconds'); ?>"
        data-minutes="<?= \F3::get('lang_minutes'); ?>"
        data-hours="<?= \F3::get('lang_hours'); ?>"></span>

    <!-- other settings -->
    <span id="config"
        data-homepage="<?= (\F3::get('homepage')) ? \F3::get('homepage') : 'newest' ?>"
        data-anonymizer="<?= \helpers\Anonymizer::getAnonymizer(); ?>"
        data-share="<?= \F3::get('share'); ?>"
        data-wallabag="<?= \F3::get('wallabag'); ?>"
        data-wallabag_version="<?= \F3::get('wallabag_version'); ?>"
        data-wordpress="<?= \F3::get('wordpress'); ?>"
        data-auto_mark_as_read="<?= \F3::get('auto_mark_as_read'); ?>"
        data-auto_collapse="<?= \F3::get('auto_collapse'); ?>"
        data-auto_stream_more="<?= \F3::get('auto_stream_more'); ?>"
        data-load_images_on_mobile="<?= \F3::get('load_images_on_mobile'); ?>"
        data-items_perpage="<?= \F3::get('items_perpage'); ?>"
        data-auto_hide_read_on_mobile="<?= \F3::get('auto_hide_read_on_mobile'); ?>"
        data-scroll_to_article_header="<?= \F3::get('scroll_to_article_header'); ?>"
        data-html_title="<?= trim(\F3::get('html_title')); ?>"></span>


    <div id="loginform">
        <form action="<?= $this->base; ?>" method="post">
        <ul id="login">
            <li><h1>selfoss login</h1></li>
            <li><label for="username"><?= trim(\F3::get('lang_login_username')); ?></label> <input type="text" name="username" id="username"></li>
            <li><label for="password"><?= trim(\F3::get('lang_login_password')); ?></label> <input type="password" name="password" id="password"></li>
            <li class="error"></li>
            <li class="button"><label>&nbsp;</label><input type="submit" value="<?= \F3::get('lang_login'); ?>" /></li>
        </ul>
        </form>
    </div>

    <div id="mainui">
        <!-- menu open for smartphone -->
        <div id="nav-mobile">
            <div id="nav-mobile-logo"><span class="unread-count"></span></div>
            <div id="nav-mobile-settings"></div>
        </div>

        <!-- navigation -->
        <div id="nav" role="navigation">
            <div id="nav-logo"></div>
            <button id="nav-mark"><?= \F3::get('lang_markread')?></button>

            <div id="nav-filter-wrapper">
            <h2 id="nav-filter-title" class="nav-filter-expanded" tabindex="0" aria-haspopup="true" aria-expanded="true"><?= \F3::get('lang_filter') ?></h2>
            <ul id="nav-filter">
                <li id="nav-filter-newest" class="nav-filter-newest" role="link" tabindex="0"><?= \F3::get('lang_newest')?> <span></span></li>
                <li id="nav-filter-unread" class="nav-filter-unread" role="link" tabindex="0"><?= \F3::get('lang_unread')?> <span class="unread-count"></span></li>
                <li id="nav-filter-starred" class="nav-filter-starred" role="link" tabindex="0"><?= \F3::get('lang_starred') ?> <span></span></li>
            </ul>
            </div>

            <hr>

            <div id="nav-tags-wrapper">
            <h2 id="nav-tags-title" class="nav-tags-expanded" tabindex="0" aria-haspopup="true" aria-expanded="true"><?= \F3::get('lang_tags') ?></h2>
            <ul id="nav-tags">
                <li class="active nav-tags-all" role="link" tabindex="0"><?= \F3::get('lang_alltags')?></li>
            </ul>
            <h2 id="nav-sources-title" class="nav-sources-collapsed" tabindex="0" aria-haspopup="true" aria-expanded="false"><?= \F3::get('lang_sources') ?></h2>
            <ul id="nav-sources">
            </ul>
            </div>

            <hr>

            <!-- navigation search input just for smartphone version -->
            <div id="nav-search" role="search">
                <input type="search" id="nav-search-term"> <input type="button" id="nav-search-button" value="<?= \F3::get('lang_searchbutton')?>">
                <hr>
            </div>

            <?php if ($this->loggedin === true && \F3::get('auth')->enabled() === false) : ?>
            <button id="nav-refresh" title="<?= trim(\F3::get('lang_refreshbutton')); ?>" class="nologin"></button>
            <button id="nav-settings" title="<?= trim(\F3::get('lang_settingsbutton')); ?>" class="nologin"></button>
            <?php endif; ?>

            <button id="nav-refresh" title="<?= trim(\F3::get('lang_refreshbutton')); ?>"></button>
            <button id="nav-settings" title="<?= trim(\F3::get('lang_settingsbutton')); ?>"></button>
            <button id="nav-logout" title="<?= trim(\F3::get('lang_logoutbutton')); ?>"></button>

            <?php if ($this->publicMode === true) : ?>
            <button id="nav-login" title="<?= trim(\F3::get('lang_loginbutton')); ?>"></button>
            <?php endif; ?>

            <a id="nav-copyright" href="https://selfoss.aditu.de" target="_blank" rel="noopener noreferrer">selfoss <?= \F3::get('version'); ?></a>
        </div>

        <!-- search -->
        <div id="search" role="search">
            <input type="search" id="search-term">
            <button id="search-remove" title="<?= \F3::get('lang_searchremove')?>"><img src="images/remove.png" alt=""></button>
            <button id="search-button" title="<?= \F3::get('lang_searchbutton')?>"><img src="images/search.png" alt=""></button>
        </div>

        <ul id="search-list">
        </ul>

        <!-- content -->
        <div id="content" role="main">
            <?= $this->content; ?>
        </div>

        <div id="stream-buttons">
            <div class="stream-empty"><?= trim(\F3::get('lang_no_entries')); ?></div>
            <div class="stream-button stream-more"><span><?= trim(\F3::get('lang_more')); ?></span></div>
            <div class="stream-button mark-these-read"><span><?= trim(\F3::get('lang_markread')); ?></span></div>
            <div class="stream-button stream-error"><?= trim(\F3::get('lang_streamerror')); ?></div>
        </div>

        <!-- fullscreen popup -->
        <div id="fullscreen-entry"></div>
    </div>

    <script src="<?= \helpers\View::getGlobalJsFileName(); ?>"></script>
</body>
</html>
