{% extends "base" %}

{% block init %}
    {% set title = "Support" %}

    {% set page_title = "Support Articles" %}
    {% set page_subtitle = "Can't find what you're looking for? Join our Discord!" %}
    {% set show_contact = true %}
{% endblock %}

{% block content %}

    <div class="inset-content" >
        <div class="tile is-ancestor">
            <div class="tile is-parent">
                <article class="tile is-child notification">
                    <p class="title">Timezone</p>
                    <p class="subtitle">Learn how to configure your timezone</p>
                    <div class="content has-text-centered">
                        <a class="button is-size-4 is-rounded is-light" href="/help/timezone">
                            <p class="is-size-4">
                                Read <span class="icon"><i class="fas fa-chevron-right"></i></span>
                            </p>
                        </a>
                    </div>
                </article>
            </div>
            <div class="tile is-parent">
                <article class="tile is-child notification">
                    <p class="title">Create reminders</p>
                    <p class="subtitle">Learn to create reminders for your server</p>
                    <div class="content has-text-centered">
                        <a class="button is-size-4 is-rounded is-light" href="/help/create_reminder">
                            <p class="is-size-4">
                                Read <span class="icon"><i class="fas fa-chevron-right"></i></span>
                            </p>
                        </a>
                    </div>
                </article>
            </div>
            <div class="tile is-parent is-vertical">
                <article class="tile is-child notification">
                    <p class="title">Delete reminders</p>
                    <p class="subtitle">Learn to delete reminders that you've created</p>
                    <div class="content has-text-centered">
                        <a class="button is-size-4 is-rounded is-light" href="/help/delete_reminder">
                            <p class="is-size-4">
                                Read <span class="icon"><i class="fas fa-chevron-right"></i></span>
                            </p>
                        </a>
                    </div>
                </article>
            </div>
        </div>
<!--        <div class="tile is-ancestor">-->
<!--            <div class="tile is-parent">-->
<!--                <article class="tile is-child notification">-->
<!--                    <p class="title">Timers</p>-->
<!--                    <p class="subtitle">Learn to manage timers</p>-->
<!--                    <div class="content has-text-centered">-->
<!--                        <a class="button is-size-4 is-rounded is-light" href="/help/timers">-->
<!--                            <p class="is-size-4">-->
<!--                                Read <span class="icon"><i class="fas fa-chevron-right"></i></span>-->
<!--                            </p>-->
<!--                        </a>-->
<!--                    </div>-->
<!--                </article>-->
<!--            </div>-->
<!--            <div class="tile is-parent">-->
<!--                <article class="tile is-child notification">-->
<!--                    <p class="title">Todo Lists</p>-->
<!--                    <p class="subtitle">Learn to manage various todo lists</p>-->
<!--                    <div class="content has-text-centered">-->
<!--                        <a class="button is-size-4 is-rounded is-light" href="/help/todo_lists">-->
<!--                            <p class="is-size-4">-->
<!--                                Read <span class="icon"><i class="fas fa-chevron-right"></i></span>-->
<!--                            </p>-->
<!--                        </a>-->
<!--                    </div>-->
<!--                </article>-->
<!--            </div>-->
<!--            <div class="tile is-parent is-vertical">-->
<!--                <article class="tile is-child notification">-->
<!--                    <p class="title">Macros</p>-->
<!--                    <p class="subtitle">Learn how to create combination commands called macros, to suit advanced use cases</p>-->
<!--                    <div class="content has-text-centered">-->
<!--                        <a class="button is-size-4 is-rounded is-light" href="/help/macros">-->
<!--                            <p class="is-size-4">-->
<!--                                Read <span class="icon"><i class="fas fa-chevron-right"></i></span>-->
<!--                            </p>-->
<!--                        </a>-->
<!--                    </div>-->
<!--                </article>-->
<!--            </div>-->
<!--        </div>-->
        <div class="tile is-ancestor">
            <div class="tile is-parent">
                <article class="tile is-child notification">
                    <p class="title">Intervals</p>
                    <p class="subtitle">Learn about repeating reminders</p>
                    <div class="content has-text-centered">
                        <a class="button is-size-4 is-rounded is-light" href="/help/intervals">
                            <p class="is-size-4">
                                Read <span class="icon"><i class="fas fa-chevron-right"></i></span>
                            </p>
                        </a>
                    </div>
                </article>
            </div>
            <div class="tile is-parent is-vertical">
                <article class="tile is-child notification">
                    <p class="title">Import/export</p>
                    <p class="subtitle">Learn how to import and export data from the dashboard</p>
                    <div class="content has-text-centered">
                        <a class="button is-size-4 is-rounded is-light" href="/help/iemanager">
                            <p class="is-size-4">
                                Read <span class="icon"><i class="fas fa-chevron-right"></i></span>
                            </p>
                        </a>
                    </div>
                </article>
            </div>
            <div class="tile is-parent">
<!--                <article class="tile is-child notification">-->
<!--                    <p class="title">Dashboard</p>-->
<!--                    <p class="subtitle">Learn to use the interactive web dashboard</p>-->
<!--                    <div class="content has-text-centered">-->
<!--                        <a class="button is-size-4 is-rounded is-light" href="/help/dashboard">-->
<!--                            <p class="is-size-4">-->
<!--                                Read <span class="icon"><i class="fas fa-chevron-right"></i></span>-->
<!--                            </p>-->
<!--                        </a>-->
<!--                    </div>-->
<!--                </article>-->
            </div>
        </div>
    </div>

    <section class="hero is-small">
        <div class="hero-body">
            <div class="container has-text-centered">
                <p class="title">Need more help?</p>
                <p class="content">
                    Feel free to come and ask us!
                </p>
            </div>
        </div>
        <div class="hero-foot has-text-centered">
            <a class="button is-size-6 is-rounded is-primary" href="https://discord.jellywx.com">
                <p class="is-size-6">
                    <span>Join Discord</span> <span class="icon"><i class="fas fa-chevron-right"></i></span>
                </p>
            </a>
        </div>
    </section>

{% endblock %}