{* config *}
<check if="{{ @PATHFINDER.REGISTRATION.STATUS != '1' }}">
    <set registrationStatusButton="disabled" />
    <set registrationStatusTitle= "User registration is currently disabled" />
</check>

{* splash page *}
<include href="templates/ui/splash.html"/>

<nav id="pf-navbar" class="navbar navbar-default navbar-fixed-top pf-head">
    <div class="container">
        <div id="pf-head" class="navbar-header">
            <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <p class="navbar-text">
                <span class="badge txt-color txt-color-green pf-navbar-version-info">{{ @PATHFINDER.VERSION }}</span>
            </p>

            <ul class="nav navbar-nav navbar-right" role="tablist">
                <li class="hide-before"><a class="pf-navbar-manual" href="#">Manual</a></li>
            </ul>
        </div>
        <div  class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right" role="tablist">
                <li class="hide-before"><a class="page-scroll" data-anchor="#pf-landing-top" href="#">Login</a></li>
                <check if="{{ @PATHFINDER.SHOW_COMPLETE_LOGIN_PAGE}}">
                    <li class="hide-before"> <a class="page-scroll" data-anchor="#pf-landing-gallery" href="#">Features</a></li>
                </check>
                <li class="hide-before"> <a class="page-scroll" data-anchor="#pf-landing-maps" href="#">Maps</a></li>
                <check if="{{ @PATHFINDER.SHOW_COMPLETE_LOGIN_PAGE}}">
                    <li class="hide-before"> <a class="page-scroll" data-anchor="#pf-landing-admin" href="#">Admin</a></li>
                    <li class="hide-before"> <a class="page-scroll" data-anchor="#pf-landing-install" href="#">Install</a></li>
                    <li class="hide-before"> <a class="page-scroll" data-anchor="#pf-landing-about" href="#">About</a></li>
                </check>
                <li class="hide-before"> <a class="page-scroll" data-anchor="#pf-landing-faq" href="#">FAQ</a></li>
                <li class="hide-before"> <a class="pf-navbar-license" href="#">License</a></li>
            </ul>
        </div>
    </div>
</nav>

{* header *}
<header id="pf-landing-top">

    {* Admin login panel *}
    <include href="templates/ui/admin_panel.html"/>

    <div id="pf-header-container">
        <canvas id="pf-header-canvas" class="hidden-xs" width="500" height="480"></canvas>
        <div class="container">
            <div id="pf-logo-container"></div>

            <div id="pf-header-preview-container" class="hidden-xs hidden-sm">
                <div id="pf-header-preview-intel" class="pf-header-preview-element pull-left"></div>
                <div id="pf-header-preview-map" class="pf-header-preview-element pull-left"></div>
                <div id="pf-header-preview-scope" class="pf-header-preview-element pull-left"></div>
                <div id="pf-header-preview-signature" class="pf-header-preview-element pull-left"></div>
                <div id="pf-header-preview-data" class="pf-header-preview-element pull-left"></div>
                <div id="pf-header-preview-gameplay" class="pf-header-preview-element pull-left"></div>
            </div>
        </div>
    </div>
</header>

{* login form *}
<section id="pf-landing-login">
    <div class="container">

        {* check for setup mode *}
        <check if="{{ array_key_exists('/setup', @ROUTES) && @PATHFINDER.SHOW_SETUP_WARNING }}">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12 col-md-8 col-md-offset-2">
                        <div class="alert alert-warning" >
                            <span class="txt-color txt-color-warning">Setup mode active</span>
                            <small>Disable '/setup' route in routes.ini on production environment! <a href="{{ $BASE }}{{ 'setup' | alias }}">Setup</a></small>
                        </div>
                    </div>
                </div>
            </div>
        </check>

        {* cookie characters *}
        <check if="{{ @cookieCharacters }}">
            <true>
                <div class="row text-center">
                    <div class="col-md-8 col-md-offset-2">
                        <h2><span class="text-primary">Select</span> your character</h2>
                    </div>
                </div>

                {* dynamic message container *}
                <div class="container-fluid">
                    <div class="row ">
                        <div class="col-xs-12 col-md-8 col-md-offset-2 pf-dynamic-message-container">
                            {* client side message e.g. ajax errors *}
                        </div>
                    </div>
                </div>

                <div class="row text-center pf-character-selection">
                    <repeat group="{{ @cookieCharacters }}" key="{{ @cookieName }}" value="{{ @characterData }}">
                        <div class="col-sm-{{ @getCharacterGrid( @cookieCharacters ) }}">
                            <div class="pf-dynamic-area" data-cookie="{{ @cookieName }}" data-href="{{ @BASE }}{{ 'sso','action=login' | alias }}">
                                {* character data is dynamically *}
                            </div>
                        </div>
                    </repeat>
                </div>
            </true>
            <false>
                <div class="row text-center">
                    <div class="col-md-8 col-md-offset-2">
                        <h2><span class="text-primary">Sign</span> up</h2>
                    </div>
                </div>
            </false>
        </check>

        {* SSO login *}
        <include href="templates/modules/sso.html"/>

        {* release notes notification panel -> shown by Javascript *}
        <div id="pf-notification-panel"></div>
    </div>
</section>

{* features/ gallery *}
<check if="{{ @PATHFINDER.SHOW_COMPLETE_LOGIN_PAGE}}">
    <section id="pf-landing-gallery">

        {* carousel *}
        <div class="container">
            <div class="row text-center">
                <div id="pf-landing-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
                    <div class="slides"></div>
                    <h3 class="title"></h3>
                    <a class="prev"><i class="fas fa-fw fa-arrow-left"></i></a>
                    <a class="next"><i class="fas fa-fw fa-arrow-right"></i></a>
                    <a class="play-pause"><i class="fas fa-fw fa-pause"></i></a>
                    <ol class="indicator"></ol>
                </div>
            </div>
        </div>

        <div id="pf-landing-gallery-thumb-container" class="container">

            <div class="row text-center">
                <div class="col-md-6 col-md-offset-3">
                    <h2><span class="text-primary">Features</span> and Impressions</h2>
                    <p class="lead">
                        <em>PATHFINDER</em> is an <em>open source</em> mapping tool for <em>EVE Online</em>, primarily developed to enrich the gameplay of small scale PvP and PvE.
                    </p>
                </div>
            </div>


            <div class="row">
                <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/login_1.jpg" data-description="Character login" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/login_1.jpg" width="160" height="160" alt="Account settings">
                    </a>
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/settings_1.jpg" data-description="Map access" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/settings_1.jpg" width="160" height="160" alt="Map access">
                    </a>
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/taskmanager_1.jpg" data-description="Task-Manager" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/taskmanager_1.jpg" width="160" height="160" alt="Task-Manager">
                    </a>
                </div>
                <div class="col-xs-12 col-sm-9 col-md-4 col-lg-4">
                    <h4>Pathfinder</h4>
                    <ul class="fa-ul pf-landing-list">
                        <li><i></i><span class="txt-color txt-color-greenDark"><e class="fas fa-fw fa-lock"></e>SSL</span> encrypted connection</li>
                        <li><i></i>User friendly <a class="pf-navbar-manual" href="#">manual</a></li>
                        <li><i></i>Open Source Project <a target="_blank" href="{{ @PATHFINDER.REPO }}" alt="GitHub" rel="noopener"><i class="fab fa-github fa-fw"></i><em>Github</em></a></li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Developer/install <a target="_blank" href="{{ @PATHFINDER.REPO }}/wiki" rel="noopener">wiki</a></li>
                            </ul>
                        </li>
                        <li><i></i><em>CCP</em> s <em>SSO</em> login</li>
                        <li><i></i>Cookie based <a target="_blank" href="//github.com/exodus4d/pathfinder/issues/138#issuecomment-216036606" rel="noopener">login system</a></li>
                        <li><i></i><em>ESI</em> API support</a></li>
                        <li><i></i>HTML5 features</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Full screen support</li>
                                <li><i></i>Browser notification system</li>
                                <li><i></i>Advanced client-side caching - 'local storage'</li>
                            </ul>
                        </li>
                        <li><i></i>Advanced user access config</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Access can be limited to specific corps/allys</li>
                            </ul>
                        </li>
                        <li><i></i>Integrated Task Manager</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Live performance graphs</li>
                                <li><i></i>Print/export client site log files for debugging</li>
                            </ul>
                        </li>
                        <li><i></i><em>SMTP</em> support</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i><a target="_blank" href="//slack.com" rel="noopener"><i class="fab fa-fw fa-slack-hash"></i><em>Slack</em></a> email notifications</li>
                            </ul>
                        </li>
                        <li><i></i>Responsive layout</li>
                    </ul>
                </div>

                <div class="clearfix visible-sm"></div>

                <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/map_2.jpg" data-description="Map selection" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/map_2.jpg" width="160" height="160" alt="Map selection">
                    </a>
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/map_3.jpg" data-description="Context menu" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/map_3.jpg" width="160" height="160" alt="Context menu">
                    </a>
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/map_1.jpg" data-description="Map information dialog" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/map_1.jpg" width="160" height="160" alt="Map information dialog">
                    </a>
                </div>

                <div class="col-xs-12 col-sm-9 col-md-4 col-lg-4">
                    <h4>Map module</h4>
                    <ul class="fa-ul  pf-landing-list">
                        <li><i></i>Live synchronisation between clients</li>
                        <li><i></i>Multiple map support</li>
                        <li><i></i>Share maps with other players or groups</li>
                        <li><i></i>Invite other players to maps</li>
                        <li><i></i>Advanced drag &amp; drop support</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Select multiple systems by <kbd>ctrl</kbd> + <kbd>click</kbd></li>
                                <li><i></i>Select and move multiple systems at once</li>
                                <li><i></i>Establish new connections by drag one system to another</li>
                                <li><i></i>Grid snapping</li>
                                <li><i></i>Prevent systems from overlapping (magnetization)</li>
                            </ul>
                        </li>
                        <li><i></i>Track fleet movements</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Pilot/Ship names</li>
                                <li><i></i>In-/decreasing pilot count per system</li>
                                <li><i></i>Location tracking (<em>ESI</em>)</li>
                            </ul>
                        </li>
                        <li><i></i>System status</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>'Locked', 'Rally point', 'Rally point', 'Friendly', 'Occupied', 'Hostile', 'Empty', 'Unscanned'</li>
                            </ul>
                        </li>
                        <li><i></i>Connection scopes</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>'Stargate', 'Wormhole', 'Jumpbridge'</li>
                            </ul>
                        </li>
                        <li><i></i>In game actions (<em>ESI</em>)</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>'Set destination', 'add waypoint'</li>
                            </ul>
                        </li>
                        <li><i></i>Keyboard shortcuts</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Easy system selection by holding <kbd>ctrl</kbd> + <kbd>drag</kbd></li>
                            </ul>
                        </li>
                        <li><i></i>Integrated live search for systems</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>TrueSec, Region, Constallation information</li>
                            </ul>
                        </li>
                        <li><i></i>Filter maps by connection scopes</li>
                        <li><i></i>Map information dialog</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Easy access to all map information</li>
                                <li><i></i>Edit systems and connections</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>


            <div class="row">
                <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/system_1.jpg" data-description="System description" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/system_1.jpg" width="160" height="160" alt="System description">
                    </a>
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/system_2.jpg" data-description="System information" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/system_2.jpg" width="160" height="160" alt="System information">
                    </a>
                </div>

                <div class="col-xs-12 col-sm-9 col-md-4 col-lg-4">
                    <h4>System module</h4>
                    <ul class="fa-ul pf-landing-list">
                        <li><i></i>Quick access to all relevant information</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Name/Alias</li>
                                <li><i></i>Wormhole class</li>
                                <li><i></i>Wormhole type</li>
                                <li><i></i>True Sec</li>
                                <li><i></i>Constellation</li>
                                <li><i></i>Region</li>
                                <li><i></i>Wormhole static information</li>
                            </ul>
                        </li>
                        <li><i></i>Optional renaming of Systems</li>
                        <li><i></i>Individual system description</li>
                        <li><i></i>Receive system warnings from other players</li>
                        <li><i></i>Quick information links to 3rd party pages</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i><em>Dotlan</em></li>
                                <li><i></i><em>Wormhol.es</em></li>
                            </ul>
                        </li>
                    </ul>
                </div>

                <div class="clearfix visible-sm"></div>

                <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/signatures_1.jpg" data-description="Signature table" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/signatures_1.jpg" width="160" height="160" alt="Signature table">
                    </a>
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/signatures_2.jpg" data-description="Signature reader dialog" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/signatures_2.jpg" width="160" height="160" alt="Signature reader dialog">
                    </a>
                </div>

                <div class="col-xs-12 col-sm-9 col-md-4 col-lg-4">
                    <h4>Signature module</h4>
                    <ul class="fa-ul pf-landing-list">
                        <li><i></i>Share system signature information</li>
                        <li><i></i>Add/Update multiple signatures at once <kbd>ctrl</kbd> + <kbd>c</kbd></li>
                        <li><i></i>Check for new signatures within a second</li>
                        <li><i></i>Get notified about new signatures in your current system</li>
                        <li><i></i>Receive warnings for not fully scanned systems</li>
                        <li><i></i>Speed up scanning and work with multiple pilots on the same scanning table</li>
                        <li><i></i>Label signatures for following operations</li>
                        <li><i></i>Updated signature type information</li>
                        <li><i></i>Shown meta information for each signature</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Creation data/time</li>
                                <li><i></i>Creation pilot/name</li>
                                <li><i></i>Pilot status</li>
                                <li>
                                    <ul class="fa-ul">
                                        <li><i></i>'Corporation', 'Alliance', 'Friendly'</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/kb_1.jpg" data-description="Killboard diagram" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/kb_1.jpg" width="160" height="160" alt="Killboard diagram">
                    </a>
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/kb_2.jpg" data-description="Killboard" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/kb_2.jpg" width="160" height="160" alt="Killboard">
                    </a>
                </div>

                <div class="col-xs-12 col-sm-9 col-md-4 col-lg-4">
                    <h4>Killboard module</h4>
                    <ul class="fa-ul pf-landing-list">
                        <li><i></i><em><a target="_blank" href="//github.com/zKillboard/zKillboard/wiki" rel="noopener">zkillboard.com</a></em> API integration</li>
                        <li><i></i>Detailed information about all recent activities in a system</li>
                        <li><i></i>Visual graph with recent kills and timestamp</li>
                        <li><i></i>Killmail deep links</li>
                        <li><i></i>This even works for wormholes where <em>CCP</em> does not provide any official API data</li>
                        <li><i></i>Live warnings for recent kills in a system</li>
                        <li><i></i>Killmail information</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Ship type</li>
                                <li><i></i>Pilot name</li>
                                <li><i></i>KM timestamp</li>
                                <li><i></i>Corporation name</li>
                                <li><i></i>Alliance name</li>
                            </ul>
                        </li>
                    </ul>
                </div>

                <div class="clearfix visible-sm"></div>

                <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/route_1.jpg" data-description="Routes table" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/route_1.jpg" width="160" height="160" alt="Routes">
                    </a>
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/route_2.jpg" data-description="Add/filter routes dialog" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/route_2.jpg" width="160" height="160" alt="Add Route">
                    </a>
                </div>

                <div class="col-xs-12 col-sm-9 col-md-4 col-lg-4">
                    <h4>Route module</h4>
                    <ul class="fa-ul pf-landing-list">
                        <li><i></i>Search for routes between systems</li>
                        <li><i></i>Predefined trade hub routes</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>'Jita', 'Amarr', 'Rens', 'Dodixie'</li>
                            </ul>
                        </li>
                        <li><i></i>Add/Search custom routes</li>
                        <li><i></i>Advanced search</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Search on multiple maps</li>
                                <li><i></i>Filter routes by:</li>
                                <li>
                                    <ul class="fa-ul">
                                        <li><i></i>'Connection types' (e.g. 'Wormholes', &hellip; )</li>
                                        <li><i></i>'Connection scopes' (e.g 'Critical Wormholes', &hellip; )</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><i></i>Average sec status for a routes</li>
                        <li><i></i>Sort/Order routes by:</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>System jumps</li>
                                <li><i></i>Average sec status</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/connection_1.jpg" data-description="Jump mass log" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/connection_1.jpg" width="160" height="160" alt="Jump mass log">
                    </a>
                </div>

                <div class="col-xs-12 col-sm-9 col-md-4 col-lg-4">
                    <h4>Mass Log</h4>
                    <ul class="fa-ul pf-landing-list">
                        <li><i></i>Track ship jump mass for wormholes</li>
                        <li><i></i>Compare multiple connections by mass left</li>
                        <li><i></i>Pre-calculate your current ship mass before jumping</li>
                    </ul>
                </div>

                <div class="clearfix visible-sm"></div>

                <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/intel_1.jpg" data-description="Intel structures" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/intel_1.jpg" width="160" height="160" alt="Intel structures">
                    </a>
                </div>

                <div class="col-xs-12 col-sm-9 col-md-4 col-lg-4">
                    <h4>Intel module&nbsp;&nbsp;<span class="label label-success">new</span></h4>
                    <ul class="fa-ul pf-landing-list">
                        <li><i></i>Share player owned structure data</li>
                        <li><i></i>Add/Update multiple structures from D-scan: <kbd>ctrl</kbd> + <kbd>c</kbd></li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Map owner information to structures</li>
                                <li><i></i>Add custom notes to structures</li>
                                <li><i></i>Mark structures 'online', 'offline'</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/statistics_1.jpg" data-description="System statistics" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/statistics_1.jpg" width="160" height="160" alt="System statistics">
                    </a>
                </div>

                <div class="col-xs-12 col-sm-9 col-md-4 col-lg-4">
                    <h4>System statistics module</h4>
                    <ul class="fa-ul pf-landing-list">
                        <li><i></i>Live in-game system data</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>System jump data</li>
                                <li><i></i>Ship/POD kills</li>
                                <li><i></i>NPC kills</li>
                            </ul>
                        </li>
                    </ul>
                </div>

                <div class="clearfix visible-sm"></div>

                <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2" id="pf-landing-feature-user-statistics">
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/statistics_2.jpg" data-description="User statistics" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/statistics_2.jpg" width="160" height="160" alt="User statistics">
                    </a>
                </div>

                <div class="col-xs-12 col-sm-9 col-md-4 col-lg-4">
                    <h4>User statistics</h4>
                    <ul class="fa-ul pf-landing-list">
                        <li><i></i>User activity logging</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Private statistics</li>
                                <li><i></i>Corporation statistics</li>
                                <li><i></i>Alliance statistics</li>
                            </ul>
                        </li>
                        <li><i></i>Log history</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>'week', 'month', 'year'</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/log_1.jpg" data-description="Log file viewer" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/log_1.jpg" width="160" height="160" alt="Log file viewer">
                    </a>
                </div>

                <div class="col-xs-12 col-sm-9 col-md-4 col-lg-4">
                    <h4>Logging</h4>
                    <ul class="fa-ul pf-landing-list">
                        <li><i></i>Separate *.log files per map</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Logfile viewer (UI)</li>
                                <li><i></i>Logfile filter/analyzer</li>
                                <li><i></i>Download log files (JSON format)</li>
                            </ul>
                        </li>
                    </ul>
                </div>

                <div class="clearfix visible-sm"></div>

                <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/discord_1.jpg" data-description="Discord/Slack Notification" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/discord_1.jpg" width="160" height="160" alt="DiscordSlack Notification">
                    </a>
                </div>

                <div class="col-xs-12 col-sm-9 col-md-4 col-lg-4">
                    <h4>Discord/Slack integration</h4>
                    <ul class="fa-ul pf-landing-list">
                        <li><i></i>Send "rally point" push notifications</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Discord, Slack, Desktop, Email</li>
                            </ul>
                        </li>
                        <li><i></i>Send map logs to a custom  <em>Discord</em> or <em>Slack</em> channel</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Discord/Slack WebHook API build in</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="row text-center hidden-xs">
                <div class="col-md-6 col-md-offset-3">
                    <p class="lead">
                        This video, will guide you through the basic functions in <em>PATHFINDER</em>.
                    </p>
                </div>
            </div>

            <div class="row text-center hidden-xs">
                <div class="pricing-big youtube"
                     id="Cc3jcN_jx04"
                     data-params="modestbranding=1&showinfo=0&controls=0&vq=hd720"
                     style="width: 640px; height: 360px;">
                </div>
            </div>

        </div>
    </section>
</check>

{* map types *}
<section id="pf-landing-maps">
    <div class="container">
        <div class="row text-center">
            <div class="col-md-6 col-md-offset-3">
                <h2><span class="text-primary">Map</span> types</h2>
                <p class="lead">
                    The following map types are available. Each map you create can be converted into any of these types at any time.
                    The access level of a map depends on their type. e.g. "Corporation" maps can be seen/edited by any pilot in your corporation.
                </p>
            </div>
        </div>

        <div class="row text-center">
            <div class="col-xs-12 col-sm-6 col-md-4 pf-landing-pricing-panel">
                <div class="panel panel-default pricing-big pf-animate pf-animate-on-visible">
                    <div class="ribbon-wrapper fade"><div class="ribbon ribbon-green">FREE</div></div>

                    <div class="panel-heading">
                        <h3 class="panel-title">Private</h3>
                    </div>
                    <div class="panel-body no-padding text-align-center">
                        <div class="the-price">
                            <h6 class="txt-color txt-color-tealLighter"><span class="subscript">Map features</span></h6>
                        </div>
                        <div class="price-features">
                            <ul class="list-unstyled text-left">
                                <li><i class="fas fa-fw fa-history txt-color txt-color-orange"></i> Map lifetime <span class="badge">{{ @PATHFINDER.MAP.PRIVATE.LIFETIME }}</span> days</li>
                                <li><i class="fas fa-fw fa-check txt-color txt-color-green"></i> Create up to <span class="badge">{{ @PATHFINDER.MAP.PRIVATE.MAX_COUNT }}</span> private maps</li>
                                <li><i class="fas fa-fw fa-check txt-color txt-color-green"></i> Share maps with up to <span class="badge">{{ @PATHFINDER.MAP.PRIVATE.MAX_SHARED }}</span> users</li>
                                <li><i class="fas fa-fw fa-check txt-color txt-color-green"></i> System information module</li>
                                <li><i class="fas fa-fw fa-check txt-color txt-color-green"></i> System statistics module</li>
                                <li><i class="fas fa-fw fa-check txt-color txt-color-green"></i> System signature module</li>
                                <li><i class="fas fa-fw fa-check txt-color txt-color-green"></i> System route module</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4 pf-landing-pricing-panel">
                <div class="panel panel-primary pricing-big pf-animate pf-animate-on-visible">
                    <div class="ribbon-wrapper fade"><div class="ribbon ribbon-green">FREE</div></div>

                    <div class="panel-heading">
                        <h3 class="panel-title">Corporation</h3>
                    </div>
                    <div class="panel-body no-padding text-align-center">
                        <div class="the-price">
                            <h6 class="txt-color txt-color-tealLighter"><span class="subscript">Map features</span></h6>
                        </div>
                        <div class="price-features">
                            <ul class="list-unstyled text-left">
                                <li><i class="fas fa-fw fa-angle-double-right"></i> All "<em>private</em>" features for corporation maps</li>
                                <li><i class="fas fa-fw fa-history txt-color txt-color-tealLighter"></i> Map lifetime <span class="badge">{{ @PATHFINDER.MAP.CORPORATION.LIFETIME }}</span> days</li>
                                <li><i class="fas fa-fw fa-check txt-color txt-color-green"></i> Create up to <span class="badge">{{ @PATHFINDER.MAP.CORPORATION.MAX_COUNT }}</span> corporation maps</li>
                                <li><i class="fas fa-fw fa-check txt-color txt-color-green"></i> Share corp maps with up to <span class="badge">{{ @PATHFINDER.MAP.CORPORATION.MAX_SHARED }}</span> corps</li>
                                <li><i class="fas fa-fw fa-check txt-color txt-color-green"></i> System killboard module</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6  col-sm-offset-3 col-md-4 col-md-offset-0 pf-landing-pricing-panel">
                <div class="panel panel-primary pricing-big pf-animate pf-animate-on-visible">
                    <div class="ribbon-wrapper fade"><div class="ribbon ribbon-green">FREE</div></div>

                    <div class="panel-heading">
                        <h3 class="panel-title">Alliance</h3>
                    </div>
                    <div class="panel-body no-padding text-align-center">
                        <div class="the-price">
                            <h6 class="txt-color txt-color-tealLighter"><span class="subscript">Map features</span></h6>
                        </div>
                        <div class="price-features">
                            <ul class="list-unstyled text-left">
                                <li><i class="fas fa-fw fa-angle-double-right"></i> All "<em>private</em>" features for alliance maps</li>
                                <li><i class="fas fa-fw fa-angle-double-right"></i> All "<em>corporation</em>" features for alliance maps</li>
                                <li><i class="fas fa-fw fa-history txt-color txt-color-tealLighter"></i> Map lifetime <span class="badge">{{ @PATHFINDER.MAP.ALLIANCE.LIFETIME }}</span> days</li>
                                <li><i class="fas fa-fw fa-check txt-color txt-color-green"></i> Create up to <span class="badge">{{ @PATHFINDER.MAP.ALLIANCE.MAX_COUNT }}</span> alliance maps</li>
                                <li><i class="fas fa-fw fa-check txt-color txt-color-green"></i> Share alliance maps with up to <span class="badge">{{ @PATHFINDER.MAP.ALLIANCE.MAX_SHARED }}</span> alliances</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{* admin *}
<check if="{{ @PATHFINDER.SHOW_COMPLETE_LOGIN_PAGE}}">
    <section id="pf-landing-admin">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-6 col-md-offset-3">
                    <h2><span class="text-primary">Admin</span> interface</h2>
                    <p class="lead">
                        Characters with in-game corporation roles can grant acces to <em>PATHFINDER</em> corporation admin interface.
                    </p>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/admin_1.jpg" data-description="Member administration" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/admin_1.jpg" width="160" height="160" alt="Member administration">
                    </a>
                </div>

                <div class="col-xs-12 col-sm-9 col-md-4 col-lg-4">
                    <h4><i class="fas fa-fw fa-users"></i> Member administration</h4>
                    <ul class="fa-ul pf-landing-list">
                        <li><i></i>Manage your corporation members</li>
                        <li><i></i>View member information</li>
                        <li><i></i>Kick members temporary or forever</li>
                        <li><i></i>Ban members from installation</li>
                    </ul>
                </div>

                <div class="clearfix visible-sm"></div>

                <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
                    <a class="pf-animate-on-visible pf-animate disabled" href="javascript:void(0);" data-description="Database settings" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/wip.jpg" width="160" height="160" alt="WIP">
                    </a>
                </div>

                <div class="col-xs-12 col-sm-9 col-md-4 col-lg-4">
                    <h4><i class="fas fa-fw fa-sitemap"></i> Map settings</h4>
                    <ul class="fa-ul pf-landing-list">
                        <li><i></i>Manage global corporation map settings</li>
                        <li><i></i>Set default map settings</li>
                        <li><i></i>Disable some sensitive map settings (e.g. im/export maps)</li>
                    </ul>
                </div>

            </div>

            <div class="row text-center pf-landing-admin-login">
                <i class="fas fa-fw fa-chevron-right"></i>
                <a class="btn btn-labeled btn-primary" href="{{ 'admin', ['*' => ''] | alias }}">
                <span class="btn-label">
                    <i class="fas fa-sign-in-alt fa-fw"></i>
                </span>&nbsp;admin&nbsp;SSO&nbsp;login
                </a>
                <i class="fas fa-fw fa-chevron-left"></i>
            </div>

        </div>
    </section>
</check>


{* install *}
<check if="{{ @PATHFINDER.SHOW_COMPLETE_LOGIN_PAGE}}">
    <section id="pf-landing-install">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-6 col-md-offset-3">
                    <h2><span class="text-primary">Install</span> and hosting</h2>
                    <p class="lead">
                        If your are planning to install or self hosting <em>PATHFINDER</em>, all required information can be found on the project <a target="_blank" href="{{ @PATHFINDER.REPO }}/wiki" rel="noopener">wiki</a>.
                        Updating or bootstrapping the DB gets very simple with the new "Setup UI" and can be done by on-click.
                    </p>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/install_settings.jpg" data-description="Server settings" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/install_settings.jpg" width="160" height="160" alt="Statistics">
                    </a>
                </div>

                <div class="col-xs-12 col-sm-9 col-md-4 col-lg-4">
                    <h4><i class="fas fa-fw fa-server"></i> Requirements check</h4>
                    <ul class="fa-ul pf-landing-list">
                        <li><i></i>Checks your server type/status</li>
                        <li><i></i>Checks your installed PHP version</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Checks for required PHP extensions</li>
                            </ul>
                        </li>
                        <li><i></i>Checks your program settings</li>
                    </ul>
                </div>

                <div class="clearfix visible-sm"></div>

                <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/install_db.jpg" data-description="Database settings" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-small" data-original="public/img/landing/thumbs/install_db.jpg" width="160" height="160" alt="Signature table">
                    </a>
                </div>

                <div class="col-xs-12 col-sm-9 col-md-4 col-lg-4">
                    <h4><i class="fas fa-fw fa-database"></i> Database setup</h4>
                    <ul class="fa-ul pf-landing-list">
                        <li><i></i>Check DB connections</li>
                        <li><i></i>Check DB version</li>
                        <li><i></i>Check DB settings</li>
                        <li><i></i>Bootstrap or update your current Database with one click</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>Check tables/columns for updates</li>
                                <li><i></i>Check column indexes/unique keys</li>
                                <li><i></i>Check foreign key constraints</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </section>
</check>

{* about *}
<check if="{{ @PATHFINDER.SHOW_COMPLETE_LOGIN_PAGE}}">
    <section id="pf-landing-about">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-6 col-md-offset-3">
                    <h2><span class="text-primary">About</span> this Application</h2>
                    <p class="lead">
                        <em>PATHFINDER</em> is a one-man spare time project with the aim of combining the latest web technology with clean and attractive interfaces.
                    </p>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-sm-offset-1 col-md-offset-1 col-lg-offset-1">
                    <h4>About Me</h4>
                    <p>
                        I am playing <em><a  target="_blank" href="//www.eveonline.com/" rel="noopener">EVE Online</a></em> since almost 4 years.
                        The majority of time (3+ years), my characters were a part of the <em><a target="_blank" href="//www.themittani.com/news/j150020-three-alliances-enter-none-leave" rel="noopener">"No Holes Barred"</a></em> alliance.
                        ,one of the oldest and best known wormhole entities that existed in <em>"New Eden"</em> (R.I.P).
                        The <em>Pathfinder</em> project was started just a few weeks before the failed invasion of <em>"Polaris"</em> took place.
                        The intention behind this project was not to create another mapping tool that already exist.
                        I wanted to make the easiest to use and most powerful 3rd party system mapper, build with the newest web technology available.
                    </p>
                    <p>
                        I am currently working as a professional software developer for one of the largest German web pages.
                        The main focus of my daily work is based on large scale frontend applications.
                    </p>
                    <p>
                        I decided to make this project <a target="_blank" href="{{ @PATHFINDER.REPO }}" rel="noopener">"Open Source"</a>, once the beta testing is finished.
                        It would be a great pleasure to me if you would help me to improve this project by submitting <a target="_blank" href="//github.com/exodus4d/pathfinder/issues" rel="noopener">bug reports</a>
                        or any kind of security issues.
                    </p>
                </div>

                <div class="col-xs-12 col-sm-5 col-md-4 col-lg-4 text-center pf-animate-on-visible pf-animate">
                    <img class="pf-landing-image-preview pf-landing-image-preview-medium pf-landing-about-me" data-original="//image.eveonline.com/Character/1946320202_256.jpg" width="256" height="256" alt="Exodus 4D">
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-5 col-md-4 col-lg-4 text-center col-sm-offset-1 col-md-offset-1 col-lg-offset-1">
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/development_1.jpg" data-description="PhpStorm on 4k resolution" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-medium" data-original="public/img/landing/thumbs/development_1.jpg" width="256" height="256" alt="PhpStorm on 4k resolution">
                    </a>
                    <a class="pf-animate-on-visible pf-animate" href="public/img/landing/development_2.jpg" data-description="Database diagram on 4k resolution" data-gallery="#pf-gallery">
                        <img class="pf-landing-image-preview pf-landing-image-preview-medium" data-original="public/img/landing/thumbs/development_2.jpg" width="256" height="256" alt="Database diagram on 4k resolution">
                    </a>
                </div>

                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <h4>Technology stack</h4>
                    <p>
                        If you are planning to get deeper into the project or even think about hosting it on your own webserver, you should  be aware of some important key points.
                        <em>Pathfinder</em> is not comparable with any "out of the box" web applications or common CMS systems that come along with an auto-install feature.
                        If you don´t have any experience with the following technologies, stop thinking about your own hosted <em>Pathfinder</em> app.
                    </p>
                    <h3>Frontend</h3>
                    <ul class="fa-ul pf-landing-list">
                        <li><i></i>'<em>Bootstrap</em>' as a HTML, CSS framework</li>
                        <li><i></i>'<em>SASS</em>' and '<em>Compass</em>' as a CSS preprocessor</li>
                        <li><i></i>'<em>RequireJs</em>' as an AMD loader and builder for Javascript</li>
                        <li><i></i>'<em>jQuery</em>' as the main Javascript library</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>≈ 50 self written jQuery plugins</li>
                                <li><i></i>≈ 40 open source plugins</li>
                            </ul>
                        </li>
                        <li><i></i>'<em>Node.js</em>' and '<em>Gulp</em>' as js task runner and CI-build environment</li>

                        <li><i></i>Code quality and automated testing</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>'<em>JSHint</em>'</li>
                                <li><i></i>'<em>Jasmine</em>'</li>
                            </ul>
                        </li>
                        <li><i></i>You should know about some HTML5 APIs</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>'<em>Local Storage</em>'</li>
                                <li><i></i>'<em>Page Visibility</em>'</li>
                                <li><i></i>'<em>Web Notifications</em>'</li>
                                <li><i></i>'<em>Fullscreen</em>'</li>
                            </ul>
                        </li>
                    </ul>

                    <h3>Backend</h3>
                    <ul class="fa-ul pf-landing-list">
                        <li><i></i>'<em>Fat-Free Framework</em>' as a lightweight PHP framework and ORM mapper</li>
                        <li><i></i>'<em>MySQL</em>' (or '<em>MariaDB</em>') as databases (configurable)</li>
                        <li><i></i>'<em>Memcache, APC or XCache</em>' as a 2nd level cache engine (configurable)</li>
                        <li><i></i>Code quality and automated testing</li>
                        <li>
                            <ul class="fa-ul">
                                <li><i></i>'<em>PHPUnit</em>'</li>
                            </ul>
                        </li>
                        <li><i></i>You should know about relational databases, MVC pattern and ORM strategies</li>
                        <li><i></i>If you have experiences in developing a Single-Page-Application, that would not hurt :)</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
</check>

{* faq *}
<section id="pf-landing-faq">
    <div class="container">
        <div class="row text-center">
            <div class="col-md-6 col-md-offset-3">
                <h2><span class="text-primary">Frequently</span> Asked Questions</h2>
                <p class="lead">
                    General questions and answers can be found here
                </p>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12 col-sm-10 col-md-10 col-lg-10 col-sm-offset-1 col-md-offset-1 col-lg-offset-1">
                <h3>Can you give me an introduction into <em>Pathfinder</em> ?</h3>
                <p>
                    Unfortunately not. I will probably not have the time to answer any question personally.
                    Make sure you have read the <span class="pf-navbar-manual"><a href="javascript:void(0);">manual</a></span>.
                    <br>
                    If there are still some open questions, please ask in the <a target="_blank" href="//forums.eveonline.com/" rel="noopener">official forums</a> thread for help.
                </p>
                <h3>Which browsers are compatible with <em>Pathfinder</em>?</h3>
                <p>
                    You will get the best user experience with the latest version <a target="_blank" href="//www.google.com/chrome/" rel="noopener"><i class="fab fa-chrome"></i> <em>Google Chrome</em></a> or <a target="_blank" href="https://www.mozilla.org/firefox" rel="noopener"><i class="fab fa-firefox"></i> <em>Firefox</em></a>.
                    <em>Pathfinder</em> uses some "bloody edge" web technologies like SVG graphics, Canvas drawing, CSS3, JS (ECMA 5.0) that are not yet fully supported by any other browser like IE or Safari.
                </p>
                <h3>Can i use multiple accounts/characters?</h3>
                <p>
                    Yes, you can add as many characters to your account you want. By accepting the 'Cookie hint', your current logged-in characters
                    are stored. If you don´t want cookies, you need to re-assign bei <em>CCP</em>´s SSO login the next time.<br>
                    Cookies are valid for {{ @PATHFINDER.LOGIN.COOKIE_EXPIRE }} days and will be destroyed on 'logout'.
                    Read <a target="_blank" href="//github.com/exodus4d/pathfinder/issues/138#issuecomment-216036606" rel="noopener">more</a>.
                </p>
                <h3>Are my data safe?</h3>
                <p>
                    Whoever said, his program is "bullet proof", is lying! But I promise to give my very best to protect any personal or map data that is stored on my server.
                    The login process is handled by <em>CCP</em>´s SSO. There is no account data (or even your <em>EVE Online</em> login data) stored or available to <em>Pathfinder</em>.<br>
                    All client side cookie data is encrypted stored server side and is protected against manipulation or abuse.
                </p>
                <h3>Can i report bugs or security issues?</h3>
                <p>
                    Good work! I am very happy for any technical feedback and improvements.
                    Feel free to contact me with your problem, either by submitting a <a target="_blank" href="//github.com/exodus4d/pathfinder/issues" rel="noopener">bug report</a> or contact me in game.
                    I´ll give my best to find a solution for your problem or path <em>Pathfinder</em>.
                </p>
                <h3>I don´t trust you, can I host <em>Pathfinder</em> on my own?</h3>
                <p>
                    Yes you can! I developed this application for the great community of <em>EVE Online</em>.
                    The program code is open source and can be used by anyone who have the required software skills.
                    Please make sure to keep all 3rd party plugin licence and respect them.
                    At the moment there is no developer guide available. But one the beta phase is finished, i will probably write a short technical documentation.
                    Do not expect any "out of the box" install routine at this point.
                    <br>
                    Server requirements:
                </p>
                <ul class="fa-ul pf-landing-list">
                    <li><i></i> A webserver with a <em><a target="_blank" href="//en.wikipedia.org/wiki/LAMP_(software_bundle)" rel="noopener">LEMP</a></em> environment</li>
                    <li><i></i> PHP 7.0+</li>
                    <li><i></i> PHP framework <a target="_blank" href="http://fatfreeframework.com/system-requirements" rel="noopener">requirements</a></li>
                    <li><i></i> MySQL 5.7+ </li>
                    <li><i></i> Some kind of server side caching. <em><a target="_blank" href="//redis.io/" rel="noopener">Redis</a></em> is preferred, file cache will also work</li>
                </ul>
            </div>
        </div>
    </div>
</section>

{* footer *}
<footer class="pf-landing-footer">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                Copyright <i class="far fa-copyright"></i> Exodus 4D - All Rights Reserved.
            </div>
            <div class="col-sm-6">
                <ul class="pf-social-networks text-right">
                    <li><a target="_blank" href="//www.youtube.com/channel/UC7HU7XEoMbqRwqxDTbMjSPg" rel="noopener"> <i class="fab fa-lg fa-youtube fa-fw"></i> </a></li>
                    <li><a target="_blank" href="{{ @PATHFINDER.REPO }}" rel="noopener"> <i class="fab fa-lg fa-github fa-fw"></i> </a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>

{* cookie warning *}
<footer class="navbar-default navbar-fixed-bottom collapse" id="pf-cookie-hint">
    <div class="container-fluid">
        <p class="navbar-text">
            Pathfinder requires cookies to maintain your login state between browser sessions. Read <a target="_blank" href="//github.com/exodus4d/pathfinder/issues/138" rel="noopener">more</a>.
        </p>
        <div class="pull-right">
            <button type="button" class="btn btn-default navbar-btn btn-success" data-toggle="collapse" data-target="#pf-cookie-hint" aria-expanded="false">
                <i class="fas fa-fw fa-check"></i>&nbsp;accept&nbsp;cookies</button>
        </div>
    </div>
</footer>

{* json-LD (structured data) *}
<include href="templates/ui/jsonld.html"/>

{* hidden dialog *}
<include href="templates/dialog/gallery.html" />
