{$_installed_plugins = []}
{if !empty($instances)}
    {foreach $instances as $id => $plugin}
        {$_installed_plugins[] = $plugin.plugin}
    {/foreach}
{/if}

<div class="c-payments-page s-settings-form" id="c-payments-page">
    <header class="c-companies-header">
        <div class="c-page-header flexbox middle full-width">
            <h1 class="custom-mb-0">[`Payment`]</h1>
            {if $company}
            <div class="dropdown">
                <button class="dropdown-toggle button small rounded light-gray js-action" type="button"><i class="fas fa-plus-circle add text-green"></i> [`Add payment option`]</button>
                <div class="dropdown-body">
                    <ul class="menu js-plugins-dropdown">
                        {foreach $plugins as $_id => $plugin}
                            {$_is_installed = in_array($_id, $_installed_plugins)}

                            <li style="{if $_is_installed || $_id == 'pay'}display: none;{/if}" data-plugin="{$_id}">
                                <a class="js-add-payment" href="{$wa_app_url}settings/payment/add/{$company.id}/{$_id}/">
                                    {if empty($plugin.icon.16)}
                                    <i class="fas fa-money-check-alt icon" style="font-size: 1rem"></i>
                                    {else}
                                    <span class="icon middle size-16"><img src="{$plugin.icon.16}" alt=""></span>
                                    {/if}
                                    {$plugin.name|escape}
                                </a>
                            </li>
                        {/foreach}

                        {if !empty($installer)}
                            <li class="bordered-top">
                                <a href="{$wa_backend_url}installer/#/plugins/wa-plugins/payment/"
                                    style="text-align: center;" id="c-browse-plugins">[`Browse payment plugins...`]</a>
                                <br>
                                <div class="hint align-center custom-m-8">[`Multiple instances of every payment option with custom settings can be created.`]</div>
                            </li>
                        {/if}
                    </ul>
                </div>
            </div>
            {/if}
        </div>
    {strip}

        <div class="c-tabs-wrapper flexbox wrap middle full-width">
            <div class="c-companies-wrapper tabs-with-arrows-side-wrapper wide">
                <ul class="tabs bordered-bottom wide c-companies-list">
                    {foreach $companies as $_company}
                        {$_is_selected = ($company.id == $_company.id)}
                        <li class="c-company {if $_is_selected}selected{/if}">
                            <a class="c-link" href="{if !$_is_selected}{$wa_app_url}settings/payment/?company={$_company.id}{else}javascript:void(0);{/if}">
                                <span class="c-name">{$_company.name|escape}</span>
                            </a>
                        </li>
                    {/foreach}
                </ul>
                <span class="c-action right" title="[`Next`]"><i class="fas fa-angle-right fa-w-8 fa-2x"></i></span>
                <span class="c-action left" title="[`Before`]"><i class="fas fa-angle-left fa-w-8 fa-2x"></i></span>
            </div>
        </div>
    </header>
    {/strip}

    {if $company}
        <section class="fields c-payment-section block custom-mt-32">

            {* TABLE *}
            <div class="fields-group c-payments-list">
                <div class="table-scrollable-x">
                    <table class="js-payments-table">
                        <tbody>
                        {foreach $instances as $id => $plugin}
                            {$_edit_url = "{$wa_app_url}settings/payment/{$id}/?company={$_company.id}"}

                            <tr class="payments-table-row" data-id="{$id}">
                                <td class="min-width"><i class="fas fa-grip-vertical text-gray sort js-sort-toggle"></i></td>
                                <td class="min-width">
                                    {if !empty($plugin.logo)}
                                        <img src="{$plugin.logo}" class="s-payment-shipping-logo">
                                    {elseif !empty($plugin.img)}
                                        <img src="{$plugin.img}" class="s-payment-shipping-logo">
                                    {/if}
                                </td>
                                <td>
                                    <h3 class="custom-mb-0 large{if empty($plugin.status)} gray{/if}">
                                        <span class="js-name">{$plugin.name|escape}</span>
                                        {if empty($plugin.status)}([`disabled`]){/if}
                                    </h3>
                                    <p class="hint">{strip_tags($plugin.description)}</p>
                                </td>
                                <td>
                                    <div class="flexbox space-16 full-width with-icons" style="text-align:right;">
                                        <div>
                                            <a href="{$_edit_url}" class="button smaller rounded light-gray nowrap"><i class="fas fa-cog text-blue settings"></i> [`Configure`]</a>
                                        </div>
                                        <div>
                                            <a class="button smaller rounded light-gray nowrap js-action js-delete-payment" href="javascript:void(0);" data-payment-id="{$id}" data-plugin="{$plugin.plugin|escape}">
                                                <i class="fas fa-trash-alt text-red delete"></i>
                                            </a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        {foreachelse}
                            <tr>
                                <td>
                                    <span class="gray">[`No payment options are defined.`]</span>
                                </td>
                            </tr>
                        {/foreach}
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <script>
            ( function($) {
                $.crm.title.set("[`Payment`]");

                new CRMSettingsPayments({
                    $wrapper: $("#c-payments-page"),
                    company_id: {$company.id|json_encode},
                    locales: {
                        confirm_delete_title: "[`Delete %payment`]",
                        confirm_delete_text: "[`This will permanently delete this payment option. Are you sure?`]",
                        confirm_delete_button: "[`Delete`]",
                        confirm_cancel_button: " [`Cancel`]"
                    }
                });

                $('#c-browse-plugins').on("click", function(event) {
                    event.preventDefault();
                    $('.c-payments-list').load("{$wa_backend_url}installer/?module=plugins&action=view&slug=wa-plugins/payment&return_hash=/payment/plugin/add/%plugin_id%/");
                });
            })(jQuery);
        </script>
    {/if}
</div>