{% extends "zerver/portico.html" %}
{% set entrypoint = "integrations" %}

{% block customhead %}
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{% endblock %}

{% block hello_page_container %} hello-main{% endblock %}

{% block portico_content %}

{% include 'zerver/marketing_nav.html' %}
{% import 'zerver/integrations/macros.html' as integration_macros %}

<div class="portico-landing integrations">
    <div class="main">
        <div class="padded-content">
            <div class="inner-content">
                <div class="integration-main-text">
                    <header>
                        <h1 class="portico-page-heading">
                            Over {{ integrations_count_display }} native integrations.
                        </h1>
                    </header>
                    <p class="portico-page-subheading">
                        And hundreds more through
                        <a href="/integrations/zapier">Zapier</a>
                        and
                        <a href="/integrations/ifttt">IFTTT</a>.
                    </p>
                </div>

                <div id="integration-search">
                    <div class="searchbar">
                        <div class="searchbar-reset">
                            <i class="zulip-icon zulip-icon-search" aria-hidden="true"></i>
                            <input type="text" class="search_input" placeholder="Search integrations"/>
                        </div>
                    </div>
                </div>

                {% set dropdown_label = 'Filter by category' %}
                {% if selected_category_slug != 'all' %}
                {% set dropdown_label = categories_dict.get(selected_category_slug, dropdown_label) %}
                {% endif %}
                <div class="integration-categories-dropdown">
                    <div class="integration-toggle-categories-dropdown">
                        <h3 class="dropdown-category-label">{{ dropdown_label }}</h3>
                        <i class="fa fa-angle-down" aria-hidden="true"></i>
                    </div>
                    <div class="dropdown-list">
                        <a href="/integrations/" class="integration-category {% if selected_category_slug == 'all' %}selected{% endif %}" data-category="all">
                            All
                        </a>
                        {% for category in categories_dict.keys() %}
                        <a href="/integrations/category/{{ category }}" class="integration-category {% if selected_category_slug == category %}selected{% endif %}" data-category="{{ category }}">
                            {{ categories_dict[category] }}
                        </a>
                        {% endfor %}
                        <h3 class="heading">Custom integrations</h3>
                        <a href="https://zulip.readthedocs.io/en/latest/webhooks/incoming-webhooks-overview.html">
                            Incoming webhooks
                        </a>
                        <a href="/help/writing-bots">
                            Interactive bots
                        </a>
                        <a href="/api/rest">
                            REST API
                        </a>
                    </div>
                </div>

                <div class="catalog">
                    <div class="integration-categories-sidebar">
                        <h3>Categories</h3>
                        <a href="/integrations/" data-category="all" class="integration-category {% if selected_category_slug == 'all' %}selected{% endif %}">
                            All
                        </a>
                        {% for category in categories_dict.keys() %}
                        <a href="/integrations/category/{{ category }}" data-category="{{ category }}" class="integration-category {% if selected_category_slug == category %}selected{% endif %}">
                            {{ categories_dict[category] }}
                        </a>
                        {% endfor %}
                        <h3>Custom integrations</h3>
                        <a href="https://zulip.readthedocs.io/en/latest/webhooks/incoming-webhooks-overview.html">
                            Incoming webhooks
                        </a>
                        <a href="/help/writing-bots">
                            Interactive bots
                        </a>
                        <a href="/api/rest">
                            REST API
                        </a>
                    </div>

                    <div class="integration-lozenges">
                        {% for integration in visible_integrations %}
                        <a href="/integrations/{{ integration.name }}{% if selected_category_slug != 'all' %}?category={{ selected_category_slug }}{% endif %}">
                            {{ integration_macros.render_integration_lozenge(integration) }}
                        </a>
                        {% endfor %}
                        <div class="integration-request center">
                            <p>Don't see an integration you need? We'd love to help.</p>
                            <div class="hero-buttons center">
                                <a href="/api/integrations-overview" class="button">
                                    Create your own
                                </a>
                                <a href="/help/request-an-integration" class="button">
                                    Request an integration
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- .inner-content -->
        </div> <!-- .padded-content -->
    </div> <!-- .main -->
</div> <!-- .portico-landing -->

{% endblock %}