{#
/**
 * 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 headContent %}
    {# Add page source code bundle ( CSS ) #}
    <link rel="stylesheet" href="{{ theme.rootUri() }}dist/pages/welcome-page.bundle.min.css?v={{ version }}&rev={{revision }}">
{% 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) allows users to create, manage and update content to be shown on Displays. Upload images and videos, create layout designs, schedule content and manage the display network.{% endtrans %}</p>
                    <div class="d-flex" style="column-gap: 8px;">
                        <a href="{{ helpService.getLandingPage() }}" type="button" target="_blank"
                           class="btn-rounded btn-secondary">Documentation</a>
                        {% if theme.getThemeConfig("app_name") == "Xibo" %}
                            <a href="https://xibosignage.com/training" type="button" target="_blank"
                            class="btn-rounded btn-outlined">Training</a>
                        {% endif %}
                    </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: 'Displays are managed from the CMS and control when and how content is shown. Get started by installing one of our Player App’s to start scheduling content to show on Displays.',
                firstLink: '{{ url_for("display.view")}}',
                secondLink: '{{ helpService.getLandingPage}}displays',
                imageUrl: '{{ theme.rootUri() }}theme/default/img/onboarding/displays.png',
                videoLinks: {
                    link: '9H8Ct00qkqs',
                    title: 'What is a Display?',
                },
                serviceId: 'displays',
                featureFlag: "displays.view"
            },
            {
                title: '{% trans "Existing Content" %}',
                text: 'Do you already have an image or video content ready to be shown? Upload your media and schedule to be shown full screen on Displays in a few easy steps.',
                firstLink: '{{ url_for("library.view")}}',
                secondLink: '{{ url_for("schedule.view")}}',
                otherLink: '{{ helpService.getLandingPage }}getting_started_showing_an_image',
                imageUrl: '{{ theme.rootUri() }}theme/default/img/onboarding/existing-content.png',
                videoLinks: [
                    {
                        link: 'yYv0B0B9MIc',
                        title: 'How to show an Image created outside of the CMS on Displays',
                    }, {
                        link: '1zZKaL-iUZo',
                        title: 'How to show a single video on Displays',
                    }
                ],
                serviceId: 'existing-content',
                featureFlag: ["library.view", "layout.view"],
                showLink: true
            },
            {
                title: '{% trans "Playlists" %}',
                text: 'Create a ‘slideshow’ of content to be shown in sequence to schedule and show on your Displays.',
                firstLink: '{{ url_for("playlist.view") }}',
                secondLink: '{{ helpService.getLandingPage }}getting_started_showing_a_playlist',    
                imageUrl: '{{ theme.rootUri() }}theme/default/img/onboarding/playlists.png',
                videoLinks: {
                    link: 'Cch392voYic',
                    title: 'How to create a Playlist and show on Displays',
                },
                serviceId: 'playlists',
                featureFlag: ["library.view", "layout.view"]
            },
            {
                title: '{% trans "Create Content" %}',
                text: 'Create your own eye catching Layout designs using a variety of tools available in the Layout Editor.',
                firstLink: '{{ url_for("layout.view") }}',
                secondLink: '{{ helpService.getLandingPage }}layouts_editor',
                imageUrl: '{{ theme.rootUri() }}theme/default/img/onboarding/create-content.png',
                videoLinks: {
                    link: 'Sh-5b8OJycE',
                    title: 'Layout Editor Overview',
                },
                serviceId: 'create-content',
                featureFlag: ["library.view", "layout.view"]
            },
            {
                title: '{% trans "Schedule" %}',
                text: 'Once you have your content ready to be shown, use the Scheduling tools to ensure that your content is shown at the right place at the right time.',
                firstLink: '{{ url_for("schedule.view") }}',
                secondLink: '{{ helpService.getLandingPage }}simple_scheduling',
                imageUrl: '{{ theme.rootUri() }}theme/default/img/onboarding/schedule.png',
                videoLinks: {
                    link: 'QmAfUsSEOAk',
                    title: 'Creating simple schedules to show content on Displays',
                },
                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 "A collection of training videos to help new users get started." %}',
                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 ) #}
    <script src="{{ theme.rootUri() }}dist/pages/welcome-page.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
{% endblock %}