{% extends "express-forms/resources/_layout" %}

{% set title = "Community"|t("express-forms") %}
{% set crumbs = [
    { label: craft.expressforms.name, url: url("express-forms") },
    { label: "Resources"|t("express-forms"), url: url("express-forms/resources") },
] %}

{% block content %}

    <p>
        {{ "The Craft community is diverse, inclusive, and amazingly helpful. You can interact with others in the Craft community in a couple of different ways:"|t("express-forms") }}
    </p>

    {% set items = [
        {
            handle: "so",
            label: "Stack Exchange",
            description: "Craft's Stack Exchange Q&A site is a great place to get help and help others. Tag questions with 'plugin-expressforms'.",
            link: "https://craftcms.stackexchange.com/questions/tagged/plugin-expressforms",
            linkText: "Visit"
        },
        {
            handle: "discord",
            label: "Craft Discord",
            description: "If you have a quick question about something, Craft Discord group will likely get you a quick response.",
            link: "https://craftcms.com/discord",
            linkText: "Get an Invite",
        },
        {
            handle: "feedback",
            label: "GitHub Discussion",
            description: "Have any questions? Have any ideas you'd like to share? Visit our GitHub Discussions area!",
            link: "https://github.com/solspace/craft-express-forms/discussions",
            linkText: "Visit",
        },
    ] %}

    <ul class="cards" style="display: none">
        {% for item in items %}
            <li>
                <div class="community-card">
                    <div class="icon" id="{{ item.handle }}-icon"></div>
                    <h3>
                        <a href="{{ item.link }}" target="_blank">
                            {{ item.label }}
                        </a>
                    </h3>
                    <p class="description">
                        {{ item.description|t('express-forms') }}
                    </p>
                </div>

                <div class="card-footer centered">
                    <a href="{{ item.link }}" class="btn submit" target="_blank">
                        {{ item.linkText|t("express-forms") }}
                    </a>
                </div>
            </li>
        {% endfor %}
    </ul>

{% endblock %}