{$_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">

    <h1 class="c-page-header">[`Payment`]</h1>

    {strip}
    <header class="c-companies-header">
        <div class="c-tabs-wrapper">
            <div class="c-companies-wrapper">
                <ul class="tabs 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`]"></span>
                <span class="c-action left" title="[`Before`]"></span>
            </div>

            <div class="c-add-wrapper">
                <a href="{$wa_app_url}settings/companies/new/"><i class="icon16 add"></i> [`Add new company`]</a>
            </div>
        </div>
    </header>
    {/strip}

    {if $company}
        <section class="c-payment-section block">

            {* HEADER *}
            <header class="c-payments-header c-layout">
                <div class="c-column middle">
                </div>
                <div class="c-column right">
                    <ul class="menu-h with-icons dropdown">
                        <li>
                            <a href="javascript:void();" class="inline-link js-action"><i class="icon16 add"></i><b><i>[`Add payment option`]</i></b><i class="icon16 darr"></i></a>
                            <ul class="menu-v with-icons right js-plugins-dropdown">
                                {foreach $plugins as $_id => $plugin}
                                    {$_is_installed = in_array($_id, $_installed_plugins)}

                                    <li style="{if $_is_installed}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)}
                                                {crmHelper::getIcon('ss payment-bw')}
                                            {else}
                                                {crmHelper::getIcon($plugin.icon.16)}
                                            {/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>
                                        <span class="hint align-center">[`Multiple instances of every payment option with custom settings can be created.`]</span>
                                    </li>
                                {/if}
                            </ul>
                        </li>
                    </ul>
                </div>
            </header>

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

                        <tr data-id="{$id}">
                            <td class="min-width"><i class="icon16 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="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>
                                <ul class="menu-h with-icons" style="text-align:right;">
                                    <li>
                                        <a href="{$_edit_url}" class="nowrap"><i class="icon16 settings"></i>[`Configure`]</a>
                                    </li>
                                    <li>
                                        <a class="nowrap js-action js-delete-payment" href="javascript:void(0);" data-payment-id="{$id}" data-plugin="{$plugin.plugin|escape}">
                                            <i class="icon16 delete"></i>[`Delete`]
                                        </a>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                    {foreachelse}
                        <tr>
                            <td>
                                <em class="gray">[`No payment options are defined.`]</em>
                            </td>
                        </tr>
                    {/foreach}
                    </tbody>
                </table>
            </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`]"
                    }
                });

                $('#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>