{% extends "freeform/_layouts/settings" %}

{% set segment4 = craft.app.request.getSegment(4) %}

{% set crumbs = [
    { label: craft.freeform.name, url: url("freeform") },
    { label: "Settings"|t("freeform"), url: url("freeform/settings") },
    { label: "Integrations"|t("freeform"), url: url("freeform/settings/integrations" ~ "/" ~ segment4) },
] %}

{% block actionButton %}

    {% if currentUser.can("freeform-settingsAccess") and providers|length > 0 %}
        <div class="buttons">
            <a href="{{ url('freeform/settings/integrations/'~type~'/new') }}" class="btn submit add icon">
                {{ "New Integration"|t('freeform') }}
            </a>
        </div>
    {% endif %}

{% endblock %}

{% block content %}

    {% if integrations|length %}
        <table id="integrations" class="data fullwidth">
            <thead>
            <tr>
                <th class="thin"></th>
                <th scope="col">{{ "Name"|t('freeform') }}</th>
                <th scope="col">{{ "Service Provider"|t('freeform') }}</th>
                <th class="thin"></th>
            </tr>
            </thead>
            <tbody>
            {% for integration in integrations %}
                <tr data-id="{{ integration.id }}" data-name="{{ integration.name }}">
                    <td class="thin" style="padding-right: 0;">
                        <div style="width: 16px;">
                            <img
                                style="width: 16px; height: 16px; display: block;"
                                src="{{ integration.integrationObject.typeDefinition.iconUrl }}"
                                alt="{{ integration.integrationObject.typeDefinition.name }}"
                            />
                        </div>
                    </td>
                    <th scope="row" data-title="{{ 'Name'|t('freeform') }}">
                        <a href="{{ url('freeform/settings/integrations/'~type~'/'~integration.id) }}">{{ integration.name }}</a>
                    </th>
                    <td data-title="{{ "Service Provider"|t('freeform') }}" class="code">
                        {{ integration.integrationObject.typeDefinition.name }}

                        {% set version = integration.integrationObject.typeDefinition.version %}
                        {% if version %}
                            <span class="integration-version">
                                {{- '' -}}
                                {%- if version starts with 'v' -%}
                                    <span class="prefix-v">v</span>
                                {%- endif -%}
                                <span class="version-number">{{- version|replace('v', '') -}}</span>
                                {{- '' -}}
                            </span>
                        {% endif %}
                    </td>
                    <td class="thin">
                        <a class="delete icon" title="{{ 'Delete'|t('freeform') }}" role="button"></a>
                    </td>
                </tr>
            {% endfor %}

            </tbody>
        </table>
    {% else %}
        <div class="zilch">
            {% if providers|length == 0 %}
                {{ "Upgrade to the Freeform Pro edition to get access to integrations."|t('freeform') }}
            {% else %}
                {{ "No integrations exist yet."|t("freeform") }}
            {% endif %}
        </div>
    {% endif %}

{% endblock %}

{% css %}
    #content { padding: 1px; }
{% endcss %}

{% js %}
    var adminTable = new Craft.AdminTable({
    tableSelector: '#integrations',
    noObjectsSelector: '#no-integrations',
    newObjectBtnSelector: '#new-integration',
    deleteAction: 'freeform/integrations/integrations/delete',
    confirmDeleteMessage: '{{ "Are you sure you want to remove the “{name}” integration?"|t('freeform') }}'
    });
{% endjs %}