<!--
ARCHES - a program developed to inventory and manage immovable cultural heritage.
Copyright (C) 2013 J. Paul Getty Trust and World Monuments Fund

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
{% load static %}
{% load template_tags %}
{% load i18n %}
{% load render_bundle from webpack_loader %}
{% load webpack_static from webpack_loader %}

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->

<head>
    <title>{{ app_title }}</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="shortcut icon" href="{% webpack_static 'favicons/favicon.ico' %}" type="image/x-icon" />
    <link rel="apple-touch-icon" href="{% webpack_static 'favicons/apple-touch-icon.png' %}" />
    <link rel="apple-touch-icon" sizes="76x76" href="{% webpack_static 'favicons/apple-touch-icon-76x76.png' %}" />
    <link rel="apple-touch-icon" sizes="120x120" href="{% webpack_static 'favicons/apple-touch-icon-120x120.png' %}" />
    <link rel="apple-touch-icon" sizes="152x152" href="{% webpack_static 'favicons/apple-touch-icon-152x152.png' %}" />
    <link rel="apple-touch-icon" sizes="180x180" href="{% webpack_static 'favicons/apple-touch-icon-180x180.png' %}" />

    {% block css %}
        <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600&amp;subset=cyrillic,latin">
        <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="{% webpack_static 'plugins/slick/slick.min.css' %}">
        <link rel="stylesheet" type="text/css" href="{% webpack_static 'plugins/slick/accessible-slick-theme.min.css' %}">

        {% render_bundle 'css/index' 'css' %}
        {% render_bundle 'css/index-slider' 'css' %}

        {% if app_settings.ACCESSIBILITY_MODE %}
            {% render_bundle 'css/accessibility' 'css' %}
        {% endif %}
    {% endblock css %}
</head>

<body>
    {% include 'javascript.htm' %}

    <!--=== Header ===-->
    <header>
        <div class="v5-splash-navbar navbar">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button 
                        type="button" 
                        class="navbar-toggle collapsed" 
                        data-toggle="collapse" 
                        data-target="#myNavbar"
                        aria-expanded="false" 
                        aria-controls="myNavbar"
                    >
                        <span class="sr-only">{% trans 'Toggle navigation' %}</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <div class="relative nav-brand-container">
                        <div class="navbar-brand-v5-icon-container">
                            <img class="navbar-brand-v5-icon"
                                src="{% webpack_static 'img/landing/Arches_logo_white.png' %}"
                                alt="{% trans 'Arches Logo' %}"
                            >
                        </div>
                        <div class="application-name">
                            <h1>{% blocktrans %}Arches | {{ version }}{% endblocktrans %}</h1>
                        </div>
                    </div>
                </div>

                <nav 
                    id="myNavbar" 
                    class="navbar-collapse collapse"
                    aria-label="{% trans 'Arches Application Navigation' %}"
                >
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#info-block-1">{% trans "Arches Features" %}</a>
                        </li>
                        <li>
                            <a href="{% url 'search_home' %}">{% trans "Search Arches" %}</a>
                        </li>

                        {% if user|can_create_resource_instance and user.username != 'anonymous' %}
                        <li>
                            <a href="{% url 'resource' %}">{% trans "Manage" %}</a>
                        </li>
                        {% endif %}

                        {% if user.username == 'anonymous' %}
                        <li>
                            <a 
                                class="application-login" 
                                id="auth-link"
                                href="{% url 'auth' %}?next={% url 'home' %}{% if user.username != 'anonymous' %}&logout=true{% endif %}"
                            >
                                {% trans "Sign in" %}
                            </a>
                        </li>
                        {% else %}
                        <li>
                            <a 
                                class="auth-welcome" 
                                href="{% url 'user_profile_manager' %}"
                                aria-label="{% trans 'Visit user profile' %}"
                            >
                                {% blocktrans with username=user.first_name|default:user.username %}
                                    Welcome, {{ username }}
                                {% endblocktrans %}
                            </a>
                        </li>
                        <li>
                            <a 
                                class="application-login"
                                href="{% url 'auth' %}?next={% url 'home' %}{% if user.username != 'anonymous' %}&logout=true{% endif %}"
                            >
                                {% trans 'Log off' %}
                            </a>
                        </li>
                        {% endif %}

                        {% if show_language_swtich %}
                        {% csrf_token %}
                        <li>
                            {% get_current_language as LANGUAGE_CODE %}
                            <div class="lang-switch" style="max-width: none;" data-bind='component: {
                                    name: "views/components/language-switcher",
                                    params: {
                                        current_language: "{{ LANGUAGE_CODE }}"
                                    }
                                }'></div>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <!--=== End Header ===-->

    <main>
        <article>
            <!-- Intro Section -->
            <section id="info-block-0" class="app-info-block intro-section relative">
                <!-- Vertical Nav -->
                <nav id="cd-vertical-nav" class="vertical-nav-container" aria-label="{% trans 'Page Navigation' %}">
                    <ul class="vertical-nav-list">
                        <li class="active">
                            <a class="vertical-nav-list-link" href="#info-block-0" data-number="1"
                                aria-label="{% trans 'Go to the top of the page' %}"
                                data-bind="click: function() { document.querySelector('#info-block-0').focus; }">
                                <span class="vertical-nav-list-ref">{% trans "Home" %}</span>
                            </a>
                        </li>
                        <li>
                            <a class="vertical-nav-list-link" href="#info-block-1" data-number="2"
                                aria-label="{% trans 'Go to the fast section' %}">
                                <span class="vertical-nav-list-ref">{% trans "Fast" %}</span>
                            </a>
                        </li>
                        <li>
                            <a class="vertical-nav-list-link" href="#info-block-2" data-number="3"
                                aria-label="{% trans 'Go to the workflows section' %}">
                                <span class="vertical-nav-list-ref">{% trans "Workflows" %}</span>
                            </a>
                        </li>
                        <li>
                            <a class="vertical-nav-list-link" href="#info-block-3" data-number="4"
                                aria-label="{% trans 'Go to the search tools section' %}">
                                <span class="vertical-nav-list-ref">{% trans "Search Tools" %}</span>
                            </a>
                        </li>
                    </ul>
                </nav>

                <!-- Slider - Start -->
                <div class="home-slider">
                    <div class="slide-img-container">
                        <img src="{% webpack_static 'img/landing/landing-primary.jpg' %}" alt=""
                            aria-describedby="slide1-attribution">
                        <div class="slide-caption">
                            <h2>{% blocktrans %}Arches {{ version }}{% endblocktrans %}</h2>
                            <p>{% trans "A web and mobile platform for" %}</p>
                            <p>{% trans "managing your most important resource information" %}</p>
                        </div>
                        <div id="slide1-attribution" class="slide-img-attribution">
                            {% trans "Image courtesy of Luis Alfonso Orellana" %}
                        </div>
                    </div>
                    <div class="slide-img-container">
                        <img src="{% webpack_static 'img/landing/bhutan_tigersnest_lr.jpg' %}" alt=""
                            aria-describedby="slide2-attribution">
                        <div class="slide-caption">
                            <h2>{% blocktrans %}Arches {{ version }}{% endblocktrans %}</h2>
                            <p>{% trans "A web and mobile platform for" %}</p>
                            <p>{% trans "managing your most important resource information" %}</p>
                        </div>
                        <div id="slide2-attribution" class="slide-img-attribution">
                            {% trans "Taktsang Palphug Monastery (also known as Paro Takstang or Tiger's Nest Monastery), Bhutan" %}
                        </div>
                    </div>
                    <div class="slide-img-container">
                        <img src="{% webpack_static 'img/landing/potala_palace.jpg' %}" alt=""
                            aria-describedby="slide3-attribution">
                        <div class="slide-caption">
                            <h2>{% blocktrans %}Arches {{ version }}{% endblocktrans %}</h2>
                            <p>{% trans "A web and mobile platform for" %}</p>
                            <p>{% trans "managing your most important resource information" %}</p>
                        </div>
                        <div id="slide3-attribution" class="slide-img-attribution">
                            {% trans "Potala Palace in Lhasa, Tibet" %}
                        </div>
                    </div>
                </div>
                <!-- Slider - End -->

                <!-- Down button -->
                <a 
                    href="#info-block-1" 
                    class="down-button" 
                    aria-label="{% trans 'Go to content' %}"
                >
                    <i class="fa fa-angle-down down-button-icon"></i>
                </a>

            </section>
            <!-- End Intro Section -->

            <!-- Info Block 1 -->
            <section id="info-block-1" class="app-info-block relative">
                <div>

                    <!-- Heading Info -->
                    <div class="sub-section">
                        <div class="col-lg-7">
                            <div class="app-info-block-intro text-center">
                                <h2 class="app-info-block-header">{% trans "Fast" %}</h2>
                                <h3 class="app-info-block-title">{% trans "Deploy Applications Rapidly" %}</h3>
                                <p class="app-info-block-text">
                                    {% blocktrans %}
                                        Design custom information management applications in hours. Build your
                                        databases with Arches Designer, then configure your interface all without having to
                                        write any code.
                                    {% endblocktrans %}
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="splash-img">
                        <img src="{% webpack_static 'img/landing/imac_designer.png' %}"
                            alt="{% trans 'Arches Designer' %}">
                    </div>

                    <!-- Sub-section -->
                    <div class="row app-info-sub-block">

                        <!-- Arches Data Type Block -->
                        <div class="col-lg-6">
                            <div class="sub-block-container">
                                <h3 class="app-info-block-title">{% trans "Interface Manager" %}</h3>
                                <p class="sub-block-description">
                                    {% blocktrans %}
                                        Arches automatically creates data entry forms based on your data models.
                                        Use Arches' Card Manager to configure the look and feel of your data entry UI.
                                    {% endblocktrans %}
                                </p>
                                <img class="sub-block-image" src="{% webpack_static 'img/landing/card_manager.png' %}"
                                    alt="{% trans 'Card Manager' %}">
                            </div>
                        </div>

                        <!-- Arches Data Type Block -->
                        <div class="col-lg-6">
                            <div class="sub-block-container">
                                <h3 class="app-info-block-title">{% trans "Data Security" %}</h3>
                                <p class="sub-block-description">
                                    {% blocktrans %}
                                        Use Arches' Permissions Manager to set up data access rules for all your
                                        user groups and individual accounts. You can define read/write/delete and no-access
                                        permissions.
                                    {% endblocktrans %}
                                </p>
                                <img class="sub-block-image"
                                    src="{% webpack_static 'img/landing/permissions_manager.png' %}"
                                    alt="{% trans 'Permissions Manager' %}">
                            </div>
                        </div>

                    </div>
                    <!-- End Sub-section -->

                </div>
            </section>
            <!-- End Info Block 1 -->

            <!-- Info Block 2 -->
            <section id="info-block-2" class="app-info-block relative">
                <div>

                    <!-- Heading Info -->
                    <div class="sub-section">
                        <div class="col-lg-7">
                            <div class="app-info-block-intro text-center">
                                <h2 class="app-info-block-header">{% trans "Workflows" %}</h2>
                                <h3 class="app-info-block-title">{% trans "Orchestrate your data entry" %}</h3>
                                <p class="app-info-block-text">
                                    {% blocktrans %}
                                        Design step-wise data management interfaces that simplify complex editing
                                        tasks. Ensure that everyone enters data completely and consistently
                                    {% endblocktrans %}
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="splash-img">
                        <img class="sub-block-image" src="{% webpack_static 'img/landing/consultation_workflow.jpg' %}"
                            alt="{% trans 'Arches Workflows' %}">
                    </div>

                </div>
            </section>
            <!-- End Info Block 2 -->

            <!-- Info Block 3 -->
            <section id="info-block-3" class="app-info-block relative">
                <div>

                    <!-- Heading Info -->
                    <div class="sub-section">
                        <div class="col-lg-7">
                            <div class="app-info-block-intro text-center">
                                <h2 class="app-info-block-header">{% trans "Arches Search Tools" %}</h2>
                                <h3 class="app-info-block-title">{% trans "Find what you're looking for" %}</h3>
                                <p class="app-info-block-text">
                                    {% blocktrans %}
                                        Arches comes with powerful built-in search tools. Quickly filter large
                                        databases with term, geospatial, and time-based search components
                                    {% endblocktrans %}
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="splash-img">
                        <img class="sub-block-image" src="{% webpack_static 'img/landing/arches_search.png' %}"
                            alt="{% trans 'Arches Search' %}">
                    </div>

                    <!-- Sub-section -->
                    <div class="wide-box">
                        <div class="box-highlight">
                            <h3 class="app-info-block-header">{% trans "Search Options" %}</h3>
                            <p>
                                {% blocktrans %}
                                    Arches gives you many ways to find precisely the information you need, even if
                                    your Arches application contains 10's of millions of records. In addition to term,
                                    thesaurus, geospatial, and temporal filters, Arches provides you with advanced filtering
                                    options that support boolean logic, inverses, and many other filtering options.
                                {% endblocktrans %}
                            </p>
                            <br>
                            <p>
                                {% blocktrans %}
                                    Arches' search capabilities also provide for sophisticated data
                                    visualizations, including interactive displays of the connections between your data
                                    objects using a Force Directed Graph.
                                {% endblocktrans %}
                            </p>
                            <br>
                            <p>
                                {% blocktrans %}
                                    If you're a software developer, you can build on Arches modular search
                                    services and create your own filters, reports, and visualizations to best show off your
                                    particular dataset.
                                {% endblocktrans %}
                            </p>
                        </div>
                    </div>

                </div>
            </section>
            <!-- End Info Block 3 -->
        </article>
    </main>

    <!-- Footer -->
    <footer>

        <!-- footer content container -->
        <div class="row footer-links">

            <!-- branding column -->
            <div class="col-lg-4">
                <h2 class="app-footer-heading">{% trans "Sample Institution Name" %}</h2>

                <div class="organization-address">
                    {% trans "Sample Address" %}<br>
                    {% trans "Getty Conservation Institute" %}<br>
                    {% trans "1200 Getty Center Drive" %}<br>
                    {% trans "Los Angeles, CA 90049" %}<br>
                </div>
            </div>

            <!-- Info Column -->
            <div class="col-lg-8">
                <h2 class="app-footer-heading">{% trans "Guides and Documentation" %}</h2>

                <!-- Links -->
                <div class="splash-links">
                    <div class="row">
                        <div class="col-lg-4">
                            <ul class="splash-link-container">
                                <li>
                                    <a 
                                        class="splash-link-address"
                                        href="https://www.archesproject.org/what-is-arches/" 
                                        target="_blank"
                                    >
                                        {% trans "What is Arches" %}
                                    </a>
                                </li>
                                <li>
                                    <a class="splash-link-address"
                                        href="https://www.archesproject.org/implementation-considerations/"
                                        target="_blank">{% trans "Implementation Considerations" %}</a>
                                </li>
                                <li>
                                    <a class="splash-link-address" href="https://www.archesproject.org/development/"
                                        target="_blank">{% trans "Information For Developers" %}</a>
                                </li>
                            </ul>
                        </div>

                        <div class="col-lg-4">
                            <ul class="splash-link-container">
                                <li>
                                    <a class="splash-link-address" href="https://www.archesproject.org/faq/"
                                        target="_blank">{% trans "FAQ" %}</a>
                                </li>
                                <li>
                                    <a class="splash-link-address" href="https://www.archesproject.org/standards/"
                                        target="_blank">{% trans "Standards and Interoperability" %}</a>
                                </li>
                                <li>
                                    <a class="splash-link-address"
                                        href="https://arches.readthedocs.io/en/stable/requirements-and-dependencies/"
                                        target="_blank">{% trans "Installation Guide" %}</a>
                                </li>
                            </ul>
                        </div>

                        <div class="col-lg-4">
                            <ul class="splash-link-container">
                                <li>
                                    <a 
                                        class="splash-link-address"
                                        href="https://www.archesproject.org/project-background/" 
                                        target="_blank"
                                    >
                                        {% trans "Arches Project Background" %}
                                    </a>
                                </li>
                                <li>
                                    <a class="splash-link-address" href="https://www.archesproject.org/videos/"
                                        target="_blank">{% trans "Arches Webinars/Presentations" %}</a>
                                </li>
                                <li>
                                    <a class="splash-link-address" href="https://www.archesproject.org/resource-models/"
                                        target="_blank">{% trans "Resource Models" %}</a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>

            </div>
        </div>

        <!-- Copyright Panel -->
        <div class="row copyright-container">
            <!-- Arches link -->
            <div class="app-footer-links">
                <div class="col-sm-8">
                    <a class="link-spacing" href="#">{% trans "Terms & Conditions" %}</a>
                    <a class="link-spacing" href="#">{% trans "Privacy Policy" %}</a>
                </div>
                <div class="col-sm-4">
                    <a class="app-footer-arches-link" href="http://www.archesproject.org" target="_blank">
                        {% trans "Powered by Arches" %}
                    </a>
                </div>
            </div>
        </div>
        <!-- End Copyright Container -->

    </footer>
    <!-- End Footer -->

    <!-- JavaScript Dependencies -->
    <script src="{% webpack_static 'node_modules/jquery/dist/jquery.min.js' %}"></script>
    <script src="{% webpack_static 'node_modules/jqueryui/jquery-ui.min.js' %}"></script>
    <script src="{% webpack_static 'node_modules/jquery-validation/dist/jquery.validate.min.js' %}"></script>
    <script src="{% webpack_static 'node_modules/underscore/underscore-min.js' %}"></script>
    <script src="{% webpack_static 'node_modules/chosen-js/chosen.jquery.min.js' %}"></script>
    <script src="{% webpack_static 'node_modules/knockout/build/output/knockout-latest.js' %}"></script>
    <script src="{% webpack_static 'node_modules/bootstrap/dist/js/bootstrap.min.js' %}"></script>
    <script src="{% webpack_static 'plugins/one.app.js' %}"></script>
    <script src="{% webpack_static 'plugins/revolution-slider/rs-plugin/js/jquery.themepunch.tools.min.js' %}"></script>
    <script
        src="{% webpack_static 'plugins/revolution-slider/rs-plugin/js/jquery.themepunch.revolution.js' %}"></script>
    <script src="{% webpack_static 'plugins/slick/slick.min.js' %}"></script>

    <!-- Custom Scripts -->
    {% render_bundle 'bindings/chosen' %}
    {% render_bundle 'bindings/key-events-click' %}
    {% render_bundle 'views/components/language-switcher' %}

    <!-- Inline Initialization Script -->
    <script>
        $(document).ready(function () {
            App.init();

            var contentSections = $('.app-info-block'),
                navigationItems = $('#cd-vertical-nav a');

            updateNavigation();
            $(window).on('scroll', function () {
                updateNavigation();
            });

            // Smooth scroll to the section.
            navigationItems.on('click', function (event) {
                event.preventDefault();
                smoothScroll($(this.hash));
            });

            function updateNavigation() {
                contentSections.each(function () {
                    var $this = $(this);
                    var activeSection = $('#cd-vertical-nav a[href="#' + $this.attr('id') + '"]').data('number') - 1;
                    if (($this.offset().top - $(window).height() / 2 < $(window).scrollTop()) &&
                        ($this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop())) {
                        navigationItems.eq(activeSection).addClass('is-selected');
                    } else {
                        navigationItems.eq(activeSection).removeClass('is-selected');
                    }
                });
            }

            function smoothScroll(target) {
                $('body,html').animate({ 'scrollTop': target.offset().top }, 600);
            }

            // Initialize the slider using slick.
            $('.home-slider').slick({
                arrowsPlacement: 'split',
                dots: true,
                autoplay: true,
                autoplaySpeed: 6000,
                prevArrow: `<button type='button' class='slick-prev pull-left' aria-label="{% trans 'Go to previous slide' %}"><i class='fa fa-chevron-left' aria-hidden='true'></i></button>`,
                nextArrow: `<button type='button' class='slick-next pull-right' aria-label="{% trans 'Go to next slide' %}"><i class='fa fa-chevron-right' aria-hidden='true'></i></button>`
            });

            var ViewModel = function () {
                // Place observables and additional logic here.
            };

            // Apply Knockout bindings after a short delay.
            setTimeout(function () {
                ko.applyBindings(new ViewModel());
            }, 300);
        });
    </script>
</body>

</html>
