<# _.each( data.payment_gateway, function( payment_gateway ) { #>
  <div data-payment-page-component-admin-dashboard-section="payment_gateway_{{ payment_gateway.alias }}"
       data-payment-page-gateway-alias="{{ payment_gateway.alias }}"
       data-payment-page-gateway-mode="{{ payment_gateway.mode }}"
       data-payment-page-connection-type="{{ payment_gateway.connection_layout }}"
       data-payment-page-has-payment-methods-visible="0"
  >
    <div data-payment-page-component-admin-dashboard-section="header">
      <h2>{{ payment_gateway.name }}</h2>

      <div data-payment-page-component-admin-dashboard-section="connection">
        <# if( payment_gateway.account_name_test !== '' ) { #>
          <span data-payment-page-component-admin-dashboard-section="account_name_test">{{ payment_gateway.account_name_test }}</span>
        <# } #>

        <# if( payment_gateway.account_name_live !== '' ) { #>
          <span data-payment-page-component-admin-dashboard-section="account_name_live">{{ payment_gateway.account_name_live }}</span>
        <# } #>

        <# if( payment_gateway.connection_layout === 'authentication' ) { #>
          <# if( !payment_gateway.mode_live_configured ) { #>
            <div data-payment-page-component-admin-dashboard-trigger="gateway_connect_live">
              <span data-payment-page-component-admin-dashboard-section="letter">{{ payment_gateway.name[ 0 ] }}</span>
              <span data-payment-page-component-admin-dashboard-section="connect">
                {{ data.lang.payment_gateway_connect.replace( "%s", payment_gateway.name ) }}
              </span>
            </div>
          <# } else { #>
            <div data-payment-page-component-admin-dashboard-trigger="gateway_disconnect_live">
              {{ data.lang.payment_gateway_disconnect }}
            </div>
          <# } #>

          <# if( !payment_gateway.mode_test_configured ) { #>
            <div data-payment-page-component-admin-dashboard-trigger="gateway_connect_test">
              <span data-payment-page-component-admin-dashboard-section="letter">{{ payment_gateway.name[ 0 ] }}</span>
              <span data-payment-page-component-admin-dashboard-section="connect">
                  {{ data.lang.payment_gateway_connect.replace( "%s", payment_gateway.name ) }}
                </span>
            </div>
          <# } else { #>
            <div data-payment-page-component-admin-dashboard-trigger="gateway_disconnect_test">
              {{ data.lang.payment_gateway_disconnect }}
            </div>
          <# } #>
        <# } else { #>
          <div data-payment-page-component-admin-dashboard-trigger="gateway_settings_live">
            <# if( payment_gateway.mode_live_configured ) { #>
              <span>{{ data.lang.payment_gateway_settings_edit }}</span>
              <img src="{{{ PaymentPage.getComponentAssetPath( 'admin-dashboard', 'img/checkmark-dependency-active.png' ) }}}" alt="checkmark"/>
            <# } else { #>
              <span>{{ data.lang.payment_gateway_settings_set }}</span>
            <# } #>
          </div>
          <div data-payment-page-component-admin-dashboard-trigger="gateway_settings_test">
            <# if( payment_gateway.mode_test_configured ) { #>
              <span>{{ data.lang.payment_gateway_settings_edit }}</span>
              <img src="{{{ PaymentPage.getComponentAssetPath( 'admin-dashboard', 'img/checkmark-dependency-active.png' ) }}}" alt="checkmark"/>
            <# } else { #>
              <span>{{ data.lang.payment_gateway_settings_set }}</span>
            <# } #>
          </div>
        <# } #>

        <div data-payment-page-component-admin-dashboard-trigger="gateway_mode">
            <span data-payment-page-component-admin-dashboard-section="gateway_mode_test"
                  data-payment-page-interaction-state="{{ payment_gateway.mode_test_configured ? 'active' : 'inactive' }}"
            >{{ data.lang.payment_gateway_mode_test }}</span>

          <span data-payment-page-component-admin-dashboard-section="gateway_switcher">
              <label data-payment-page-component-admin-dashboard-trigger="gateway_mode">
                <input data-payment-page-component-admin-dashboard-trigger="gateway_mode_checkbox" type="checkbox" {{{ payment_gateway.mode === "test" ? 'checked="checked"' : '' }}}>
                <span></span>
              </label>
            </span>

          <span data-payment-page-component-admin-dashboard-section="gateway_mode_live"
                data-payment-page-interaction-state="{{ payment_gateway.mode_live_configured ? 'active' : 'inactive' }}"
          >{{ data.lang.payment_gateway_mode_live }}</span>
        </div>
      </div>
    </div>
    <div data-payment-page-component-admin-dashboard-section="description_container">
      <img src="{{ payment_gateway.logo }}" alt="{{ payment_gateway.name }}"/>
      <div>
        {{{ payment_gateway.description }}}

        <# if( typeof payment_gateway.webhook_settings !== "undefined"
        && ( payment_gateway.webhook_settings.test_available || payment_gateway.webhook_settings.live_available ) ) { #>
        <# let _title = ''; #>

        <div data-payment-page-component-admin-dashboard-section="payment_gateway_webhook_settings_container">
          <# if( payment_gateway.webhook_settings.live_available ) { #>
          <# _title = payment_gateway.webhook_settings.title_popup + ' <span data-payment-page-mode="live">' + data.lang.payment_gateway_mode_live + '</span>' #>

          <div data-payment-page-component-admin-dashboard-trigger="payment_gateway_webhook_settings_live_{{ payment_gateway.alias }}"
               data-payment-page-component-admin-dashboard-args="{{{ _.escape( JSON.stringify( {
                                    title       : _title,
                                    description : ( typeof payment_gateway.webhook_settings.live_fields_description !== 'undefined' ? payment_gateway.webhook_settings.live_fields_description : '' ),
                                    fields      : payment_gateway.webhook_settings.live_fields
                                 } ) ) }}}">
            <p>
              <span data-payment-page-component-admin-dashboard-section="title">{{{ payment_gateway.webhook_settings.title }}}</span>
              <span data-payment-page-mode="live">{{ data.lang.payment_gateway_mode_live }}</span>
            </p>
            <# if( parseInt( payment_gateway.webhook_settings.live_configured ) ) { #>
            <img src="{{{ PaymentPage.getComponentAssetPath( 'admin-dashboard', 'img/checkmark-dependency-active.png' ) }}}" alt="checkmark"/>
            <# } #>
          </div>
          <# } #>

          <# if( payment_gateway.webhook_settings.test_available ) { #>
          <# _title = payment_gateway.webhook_settings.title_popup + ' <span data-payment-page-mode="test">' + data.lang.payment_gateway_mode_test + '</span>' #>

          <div data-payment-page-component-admin-dashboard-trigger="payment_gateway_webhook_settings_test_{{ payment_gateway.alias }}"
               data-payment-page-component-admin-dashboard-args="{{{ _.escape( JSON.stringify( {
                                    title       : _title,
                                    description : ( typeof payment_gateway.webhook_settings.test_fields_description !== 'undefined' ? payment_gateway.webhook_settings.test_fields_description : '' ),
                                    fields      : payment_gateway.webhook_settings.test_fields
                                 } ) ) }}}">
            <p>
              <span data-payment-page-component-admin-dashboard-section="title">{{{ payment_gateway.webhook_settings.title }}}</span>
              <span data-payment-page-mode="test">{{ data.lang.payment_gateway_mode_test }}</span>
            </p>
            <# if( parseInt( payment_gateway.webhook_settings.test_configured ) ) { #>
            <img src="{{{ PaymentPage.getComponentAssetPath( 'admin-dashboard', 'img/checkmark-dependency-active.png' ) }}}" alt="checkmark"/>
            <# } #>
          </div>
          <# } #>
        </div>
        <# } #>
      </div>
    </div>

    <div data-payment-page-component-admin-dashboard-section="payment_methods_container">
      <table data-payment-page-component-admin-dashboard-section="payment_methods">
        <thead>
          <tr>
            <th>{{ data.lang.payment_methods_title }}</th>
            <th>{{ data.lang.payment_methods_status }}</th>
          </tr>
        </thead>
        <tbody>
          <# _.each( payment_gateway.payment_methods, function( payment_method ) { #>
            <tr>
              <td>
                {{{ payment_method.description }}}
                <# if( !payment_method.is_available ) { #>
                  <p>{{{ data.lang.upgrade_payment_gateway.replace( "%1$s", typeof payment_method.upgrade_name !== 'undefined' ? payment_method.upgrade_name : payment_method.name ).replace( "%2$s", '<a href="' + data.upgrade_link + '" target="_blank" data-payment-page-component-admin-dashboard-trigger="upgrade">' + data.lang.upgrade + '</a>' ) }}}</p>
                <# } else if( payment_method.is_upgradeable_recurring ) { #>
                  <p>{{{ data.lang.upgrade_payment_gateway_recurring.replace( "%1$s", payment_method.name ).replace( "%2$s", '<a href="' + data.upgrade_link + '" target="_blank" data-payment-page-component-admin-dashboard-trigger="upgrade">' + data.lang.upgrade + '</a>' ) }}}</p>
                <# } else { #>
                  <# if( typeof payment_method.settings !== "undefined" ) { #>
                    <div data-payment-page-component-admin-dashboard-section="payment_method_settings_container">
                      <# _.each( payment_method.settings, function( information ) { #>
                        <# let _title = information.title.replace( "%s", '<span data-payment-page-mode="live">' + data.lang.payment_gateway_mode_live + '</span>' ) #>

                        <div data-payment-page-component-admin-dashboard-trigger="payment_method-settings_live_{{ payment_method.alias }}"
                             data-payment-page-component-admin-dashboard-args="{{{ _.escape( JSON.stringify( {
                                title       : _title,
                                description : ( typeof information.live_fields_description !== 'undefined' ? information.live_fields_description : '' ),
                                fields      : information.live_fields
                             } ) ) }}}">
                          <p>{{{ _title }}}</p>
                          <# if( parseInt( information.live_configured ) ) { #>
                            <img src="{{{ PaymentPage.getComponentAssetPath( 'admin-dashboard', 'img/checkmark-dependency-active.png' ) }}}" alt="checkmark"/>
                          <# } #>
                        </div>

                        <# _title = information.title.replace( "%s", '<span data-payment-page-mode="test">' + data.lang.payment_gateway_mode_test + '</span>' ) #>

                        <div data-payment-page-component-admin-dashboard-trigger="payment_method-settings_test_{{ payment_method.alias }}"
                             data-payment-page-component-admin-dashboard-args="{{{ _.escape( JSON.stringify( {
                                title       : _title,
                                description : ( typeof information.test_fields_description !== 'undefined' ? information.test_fields_description : '' ),
                                fields      : information.test_fields
                             } ) ) }}}">
                          <p>{{{ _title }}}</p>
                          <# if( parseInt( information.test_configured ) ) { #>
                          <img src="{{{ PaymentPage.getComponentAssetPath( 'admin-dashboard', 'img/checkmark-dependency-active.png' ) }}}" alt="checkmark"/>
                          <# } #>
                        </div>
                      <# }) #>
                    </div>
                  <# } #>
                <# } #>
              </td>
              <td>
                <# if( payment_method.is_available ) { #>
                  <# if( typeof payment_method.requires_https !== 'undefined' && payment_method.requires_https && !parseInt( PaymentPage.settings.is_https ) ) { #>
                    <label>
                      <input type="checkbox"
                             disabled="disabled"
                      />
                      <span data-payment-page-hint="danger"
                            data-payment-page-hint-location="left"
                            aria-label="{{ data.lang.payment_method_requires_https }}"></span>
                    </label>
                  <# } else { #>
                    <label>
                      <input data-payment-page-component-admin-dashboard-trigger="payment_method_{{ payment_method.alias }}"
                             type="checkbox"
                             {{{ payment_page_in_array( payment_method.alias, payment_gateway.payment_methods_enabled ) ? 'checked="checked"' : '' }}}
                      />
                      <span></span>
                    </label>
                  <# } #>
                <# } #>
              </td>
            </tr>
          <# }) #>
        </tbody>
      </table>
    </div>

    <div data-payment-page-component-admin-dashboard-trigger="payment_gateway_expand">
      <span>{{{ data.lang.payment_gateway_methods_expand }}}</span>
    </div>
    <div data-payment-page-component-admin-dashboard-trigger="payment_gateway_hide">
      <span>{{{ data.lang.payment_gateway_methods_hide }}}</span>
    </div>
  </div>
<# }) #>

<div data-payment-page-component="admin-marketing-notifications"
     data-payment-page-component-args="{{{ _.escape( JSON.stringify( { area_slug : 'payment-gateways' } ) ) }}}"></div>