[%- USE T8 %]
[%- USE HTML %]
[%- USE LxERP %]
[%- USE L %]

<div id="contacts">
  <table>
    <tr>
      <th align="left">[% 'Contacts' | $T8 %]</th>

      <td>
        [%
          L.select_tag(
            'contact.cp_id',
            SELF.contacts,
            default = SELF.contact.cp_id,
            with_empty = 1,
            empty_title = LxERP.t8('New contact'),
            value_key = 'cp_id',
            title_key = 'full_name',
            onchange = "kivi.CustomerVendor.selectContact({onFormSet: function(){contactsMapWidget.testInputs();}});",
          )
        %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Gender' | $T8 %]</th>

      <td>
        [%
          L.select_tag(
            'contact.cp_gender',
            [['m', LxERP.t8('male')], ['f', LxERP.t8('female')]],
            default = SELF.contact.cp_gender
          )
        %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Title' | $T8 %]</th>

      <td>
        [% L.input_tag('contact.cp_title', SELF.contact.cp_title, size = 40 maxlength = 75) %]
        [% L.select_tag('contact_cp_title_select', SELF.all_titles, with_empty = 1, onchange = '$("#contact_cp_title").val(this.value);') %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Department' | $T8 %]</th>

      <td>
        [% L.input_tag('contact.cp_abteilung', SELF.contact.cp_abteilung, size = 40) %]
        [% L.select_tag('contact_cp_abteilung_select', SELF.all_departments, default = SELF.contact.cp_abteilung,  with_empty = 1, onchange = '$("#contact_cp_abteilung").val(this.value);') %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Function/position' | $T8 %]</th>

      <td>
        [% L.input_tag('contact.cp_position', SELF.contact.cp_position, size = 40, maxlength = 75) %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Given Name' | $T8 %]</th>

      <td>
        [% L.input_tag('contact.cp_givenname', SELF.contact.cp_givenname, size = 40, maxlength = 75) %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Name' | $T8 %]</th>

      <td>
        [% L.input_tag('contact.cp_name', SELF.contact.cp_name, size = 40, maxlength = 75) %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'E-mail' | $T8 %]</th>

      <td>
        [% L.input_tag('contact.cp_email', SELF.contact.cp_email, size = 40) %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Phone1' | $T8 %]</th>

      <td>
        [% L.input_tag('contact.cp_phone1', SELF.contact.cp_phone1, size = 40, maxlength = 75) %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Phone2' | $T8 %]</th>

      <td>
        [% L.input_tag('contact.cp_phone2', SELF.contact.cp_phone2, size = 40, maxlength = 75) %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Fax' | $T8 %]</th>

      <td>
        [% L.input_tag('contact.cp_fax', SELF.contact.cp_fax, size = 40) %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Mobile1' | $T8 %]</th>

      <td>
        [% L.input_tag('contact.cp_mobile1', SELF.contact.cp_mobile1, size = 40) %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Mobile2' | $T8 %]</th>

      <td>
        [% L.input_tag('contact.cp_mobile2', SELF.contact.cp_mobile2, size = 40) %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Sat. Phone' | $T8 %]</th>

      <td>
        [% L.input_tag('contact.cp_satphone', SELF.contact.cp_satphone, size = 40) %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Sat. Fax' | $T8 %]</th>

      <td>
        [% L.input_tag('contact.cp_satfax', SELF.contact.cp_satfax, size = 40) %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Project' | $T8 %]</th>

      <td>
        [% L.input_tag('contact.cp_project', SELF.contact.cp_project, size = 40) %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Street' | $T8 %]</th>

      <td>
        [% L.input_tag('contact.cp_street', SELF.contact.cp_street, size = 40, maxlength = 75) %]
        <span id="contact_map"></span>
        <script type="text/javascript">
          var contactsMapWidget = new kivi.CustomerVendor.MapWidget('contact_cp_');
          $(function() {
            contactsMapWidget.render($('#contact_map'));
          });
        </script>
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Zip, City' | $T8 %]</th>

      <td>
        [% L.input_tag('contact.cp_zipcode', SELF.contact.cp_zipcode, size = 5, maxlength = 10) %]
        [% L.input_tag('contact.cp_city', SELF.contact.cp_city, size = 25, maxlength = 75) %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Private Phone' | $T8 %]</th>

      <td>
        [% L.input_tag('contact.cp_privatphone', SELF.contact.cp_privatphone, size = 40) %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Private E-mail' | $T8 %]</th>

      <td>
        [% L.input_tag('contact.cp_privatemail', SELF.contact.cp_privatemail, size = 40) %]
      </td>
    </tr>

    <tr>
      <th align="left" nowrap>[% 'Birthday' | $T8 %]</th>

      <td>
        [% L.date_tag('contact.cp_birthday', SELF.contact.cp_birthday) %]
      </td>
    </tr>

    [% contact_cvars = SELF.contact.cvars_by_config %]

    [% IF ( contact_cvars.size ) %]
      <tr>
        <td colspan="2">
          <hr>
        </td>
      </tr>

      [% FOREACH var = contact_cvars %]
        <tr>
          <th align="left" valign="top" nowrap>[% var.config.description | html %]</th>

          <td valign="top">
            [% PROCESS 'customer_vendor/render_cvar_input.html'
                       cvar_name_prefix = 'contact_cvars.'
            %]
          </td>
        </tr>
      [% END %]
    [% END %]

  </table>

  [% L.button_tag('submitInputButton(this);', LxERP.t8('Delete Contact'), name = 'action_delete_contact', class = 'submit') %]
  [% IF ( !SELF.contact.cp_id ) %]
    <script type="text/javascript">
      $('#action_delete_contact').hide();
    </script>
  [% END %]
</div>