{#
/**
 * Copyright (C) 2024 Xibo Signage Ltd
 *
 * Xibo - Digital Signage - https://xibosignage.com
 *
 * This file is part of Xibo.
 *
 * Xibo 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
 * any later version.
 *
 * Xibo 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 Xibo.  If not, see <http://www.gnu.org/licenses/>.
 */
#}
{% extends "authed.twig" %}

{% block title %}{{ "Welcome"|trans }} | {% endblock %}

{% block pageContent %}
    <div id="top" class="welcome-page flex-column" style="background-image: url('{{ theme.rootUri() }}theme/default/img/vector-bg.png');">
        <div class="container-fluid" style="max-width: 1500px;">
            <div class="welcome-header">
                <div class="header-text-content">
                    {% set productName = theme.getThemeConfig('theme_title') %}
                    <h2>{% trans %}Welcome to the {{productName}} CMS{% endtrans %}</h2>
                    <p>{% trans %}The Content Management System (CMS) lets you create, manage, and update content. 
                        You can upload images and videos, design layouts, schedule content timing and location, 
                        and control the whole display network.{% endtrans %}</p>
                    <div class="d-flex" style="column-gap: 8px;">
                        <a href="{{ helpService.getLandingPage() }}" type="button" target="_blank"
                           class="btn-rounded btn-orange">Documentation</a>
                        <a href="https://xibosignage.com/training" type="button" target="_blank"
                           class="btn-rounded btn-outlined">Training</a>
                    </div>
                </div>
                <div class="header-image-box">
                    <img class="onboarding-welcome-image" src="{{ theme.rootUri() }}theme/default/img/onboarding.png" alt="Welcome Image">
                </div>
            </div>
            <div class="onboarding-cards-container">
                <img class="line-curve" src="{{ theme.rootUri() }}theme/default/img/line-curve-vector.svg" alt="Welcome Image">
            </div>
            <div class="d-flex flex-column service-card-container" style="row-gap: 40px; margin-top: 80px;">
                {% if currentUser.featureEnabled("displays.view") %}
                    <div class="displays-enabled"></div>
                {% endif %}
                {% if currentUser.featureEnabled("library.view") or currentUser.featureEnabled("layout.view") %}
                    <div class="library-layout-enabled d-flex flex-column" style="row-gap: 40px;"></div>
                {% endif %}
                {% if currentUser.featureEnabled("schedule.view") %}
                    <div class="schedule-enabled"></div>
                {% endif %}
            </div>
            <div class="others-card-container">
            </div>
        </div>
        <a class="scroll-up" href="#top">
            <img style="height:30px; width: 30px;" src="{{ theme.rootUri() }}theme/default/img/onboarding/back-to-top-icon.svg" alt="Welcome Image">
        </a>
    </div>
{% endblock %}

{% block javaScript %}
    {# Initialise JS variables and translations #}
    <script type="text/javascript" nonce="{{ cspNonce }}" defer>
        var isXiboThemed = '{{ theme.getThemeConfig("app_name") }}' === 'Xibo';
        var isSuperAdmin ='{{ currentUser.isSuperAdmin()}}';

        var onboardingCard = [
            {
                title: '{% trans "Displays" %}',
                link: 'displays',
                iconURL: '{{ theme.rootUri() }}theme/default/img/onboarding/displays-icon.svg',
            },
            {
                title: '{% trans "Existing Content" %}',
                link: 'existing-content',
                iconURL: '{{ theme.rootUri() }}theme/default/img/onboarding/existing-content-icon.svg',
            },
            {
                title: '{% trans "Playlists" %}',
                link: 'playlists',
                iconURL: '{{ theme.rootUri() }}theme/default/img/onboarding/playlist-icon.svg',
            },
            {
                title: '{% trans "Create Content" %}',
                link: 'create-content',
                iconURL: '{{ theme.rootUri() }}theme/default/img/onboarding/create-content-icon.svg',
            },
            {
                title: '{% trans "Schedule" %}',
                link: 'schedule',
                iconURL: '{{ theme.rootUri() }}theme/default/img/onboarding/schedule-icon.svg',
            },
        ];

        var serviceCards = [
            {
                title: '{% trans "Displays" %}',
                text: 'Get started by installing one of our Players and entering the pairing code into the <a class="text-link">Displays page</a> so that you can show your content. If you don’t have a device to use as a Player you can preview and test scheduling in your web browser.',
                firstLink: '{{ url_for("display.view")}}',
                secondLink: '{{ helpService.getLandingPage}}displays.html',
                imageUrl: '{{ theme.rootUri() }}theme/default/img/onboarding/displays.png',
                serviceId: 'displays',
                featureFlag: "displays.view"
            },
            {
                title: '{% trans "Existing Content" %}',
                text: 'Do you already have content ready to show? Get started showing that in 2 easy steps. Upload any existing full-screen images or videos to the <a class="text-link">Media Library</a>, and then schedule those to be shown when you want on your display from the <a class="text-link">Schedule page</a>.',
                firstLink: '{{ url_for("library.view")}}',
                secondLink: '{{ url_for("schedule.view")}}',
                otherLink: '{{ helpService.getLandingPage }}media_library.html',
                imageUrl: '{{ theme.rootUri() }}theme/default/img/onboarding/existing-content.png',
                serviceId: 'existing-content',
                featureFlag: ["library.view", "layout.view"],
                showLink: true
            },
            {
                title: '{% trans "Playlists" %}',
                text: 'If you’ve got lots of images or videos to show, then put them into a Playlist and then schedule the Playlist on your display for easier management.',
                firstLink: '{{ url_for("playlist.view") }}',
                secondLink: '{{ helpService.getLandingPage }}media_playlists.html',    
                imageUrl: '{{ theme.rootUri() }}theme/default/img/onboarding/playlists.png',
                serviceId: 'playlists',
                featureFlag: ["library.view", "layout.view"]
            },
            {
                title: '{% trans "Create Content" %}',
                text: 'If you need to create more complex content, the Layout Editor is there to help you create something stunning. There are pre-designed templates that you can work from, or you can create something from scratch.',
                firstLink: '{{ url_for("layout.view") }}',
                secondLink: '{{ helpService.getLandingPage }}layouts_editor.html',
                imageUrl: '{{ theme.rootUri() }}theme/default/img/onboarding/create-content.png',
                serviceId: 'create-content',
                featureFlag: ["library.view", "layout.view"]
            },
            {
                title: '{% trans "Schedule" %}',
                text: 'You can mix and match between scheduling media items, layouts, and campaigns as you want. If you schedule multiple things at the same time, they’ll be shown one after the other.',
                firstLink: '{{ url_for("schedule.view") }}',
                secondLink: '{{ helpService.getLandingPage }}scheduling_events.html',
                imageUrl: '{{ theme.rootUri() }}theme/default/img/onboarding/schedule.png',
                serviceId: 'schedule',
                featureFlag: "schedule.view"
            }
        ];

        var othersCards = [
            {
                title: '{% trans "Documentation" %}',
                text: '{% trans "Our documentation is there to help you at every turn. It’s updated regularly to reflect changes and additions to the platform, and so it’s a valuable reference tool for all users." %}',
                links: `
                        <a href="{{ helpService.getLandingPage() }}" target="_blank">{% trans "User Manual" %}</a>
                        ${isXiboThemed && isSuperAdmin ? 
                        `<a href="https://xibosignage.com/docs/setup" target="_blank">{% trans "Admin" %}</a>
                         <a href="https://xibosignage.com/docs/developer" target="_blank">{% trans "Developer" %}</a>` : ''
                        }`,
                iconName: "documentation"
            },
        ];

        if (isXiboThemed) {
            othersCards.push({
                title: '{% trans "Training" %}',
                text: '{% trans "Self-paced online training videos designed to get you up and running with Xibo in no time." %}',
                links: `<a href="https://xibosignage.com/training" target="_blank">{% trans "New User Training" %}</a>`,
                iconName: "training"
            });
        }

        othersCards.push({
            title: '{% trans "Help" %}',
            text: '{% trans "We are here to help! All the support you’re looking for, at your fingertips." %}',
            links: isXiboThemed ? `
                <a href="https://xibosignage.com/install-upgrade#install" target="_blank">{% trans "Help Centre" %}</a>
                <a href="https://community.xibo.org.uk" target="_blank">{% trans "Community" %}</a>
            ` : '',
            iconName: "help"
        });
    </script>

    {# Add page source code bundle ( JS and CSS ) #}
    <script src="{{ theme.rootUri() }}dist/pages/welcome-page.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
{% endblock %}