[%
    txt_password = locale.maketext('Use the email account’s password.');
    IF mail_client_settings.from_archiving || mail_client_settings.inbox_username.match('_mainaccount@') || !mail_client_settings.inbox_username.match('@');
        txt_password = locale.maketext('Use your [asis,cPanel] password.');
    END;
    table_props = 'style="border-collapse: collapse; border-spacing: 0; margin-bottom: 0; width: 100%; background-color: transparent; max-width: 100%;"';
    td_props = 'style="border-top: 1px solid #ddd; padding: 8px;"';
    li_props = 'style="display: inline-block; padding-left: 5px; padding-right: 5px;"';
    ul_props = 'style="margin-bottom: 10px; margin-top: 0; list-style: outside none none; margin-left: -5px; padding-left: 0;"';
    h2_title = locale.maketext('Calendar [output,amp] Contacts Manual Settings');
    IF mail_client_settings.selected_account_services.caldav && !mail_client_settings.selected_account_services.carddav;
        h2_title = locale.maketext('Calendar Manual Settings');
    ELSIF mail_client_settings.selected_account_services.carddav && !mail_client_settings.selected_account_services.caldav;
        h2_title = locale.maketext('Contacts Manual Settings');
    END;
    styles = {
        ssl = {
            outer = 'style="background-color: #fff;  border: 1px solid transparent; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); margin-bottom: 20px; border-color: #428bca;"'
            inner = 'style="border-top-left-radius: 3px; border-top-right-radius: 3px; padding: 10px 15px; background-color: #428bca; border-color: #428bca; color: #fff;"'
        }
        no_ssl = {
            outer = 'style="background-color: #fff;  border: 1px solid transparent; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); margin-bottom: 20px; border-color: #f6c342;"'
            inner = 'style="border-top-left-radius: 3px; border-top-right-radius: 3px; padding: 10px 15px; background-color: #fcf8e1; border-color: #f6c342; color: #333;"'
        }
    };
    phrases = {
        ssl = locale.maketext('Secure [output,abbr,SSL,Secure Sockets Layer]/[output,abbr,TLS,Transport Layer Security] Settings (Recommended).')
        no_ssl = locale.maketext('Non-[asis,SSL] Settings (NOT Recommended).')
    };
%]

    <div class="section">
        <h2>[% h2_title %]</h2>
        <div class="row">
         [% FOREACH type IN [ 'ssl', 'no_ssl' ] %]
         <div class="col-md-6">
          <div [% styles.$type.outer %] class="preferred-selection panel panel-primary">
               <div [% styles.$type.inner %] class="panel-heading">
                [% phrases.$type %]
              </div>
              <table class="table manual_settings_table" [% table_props %]>
                  <tr>
                      <td [% td_props %]>[% locale.maketext('Username:') %]</td>
                      <td [% td_props %] class="data wrap-text">[% mail_client_settings.cal_contacts_config.user %]</td>
                  </tr>
                  <tr>
                      <td [% td_props %]>[% locale.maketext('Password:') %]</td>
                      <td [% td_props %] class="escape-note"> [% txt_password %]</td>
                  </tr>
                  <tr>
                      <td [% td_props %]>[% locale.maketext("Server:") %]</td>
                      <td [% td_props %] class="data">[% mail_client_settings.cal_contacts_config.$type.server %]
                          <ul
                          [% ul_props %]
                          class="port_list list-inline">
                              <li [% li_props %]>[% locale.maketext('Port: [_1]',mail_client_settings.cal_contacts_config.$type.port) %]</li>
                          </ul>
                      </td>
                  </tr>
                  [% IF mail_client_settings.selected_account_services.caldav %]
                  <tr>
                      <td [% td_props %]>[% locale.maketext("Full Calendar URL(s):") %]</td>
                      <td [% td_props %] class="data">
                          <ul
                          [% ul_props %]
                          class="port_list list-inline">
                              [% FOREACH thing IN mail_client_settings.cal_contacts_config.$type.calendars %]
                              <li [% li_props %]><b>[% thing.name %]</b>:</li>
                              <li [% li_props %]>[% thing.url %]</li>
                              [% END %]
                          </ul>
                      </td>
                  </tr>
                  [% END %]
                  [% IF mail_client_settings.selected_account_services.carddav %]
                  <tr>
                      <td [% td_props %]>[% locale.maketext("Full Contact List URL(s):") %]</td>
                      <td [% td_props %] class="data">
                          <ul
                          [% ul_props %]
                          class="port_list list-inline">
                              [% FOREACH thing IN mail_client_settings.cal_contacts_config.$type.contacts %]
                              <li [% li_props %]><b>[% thing.name %]</b>:</li>
                              <li [% li_props %]>[% thing.url %]</li>
                              [% END %]
                          </ul>
                      </td>
                  </tr>
                  [% END %]
              </table>
          </div>
         </div>
         [% END %]
        </div>
      </div>
    </div>