{% 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">Creating 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">
                <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 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/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>

    <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">
                    Join Discord <span class="icon"><i class="fas fa-chevron-right"></i></span>
                </p>
            </a>
        </div>
    </section>

{% endblock %}