<% align = field.dig('preferences', 'align') %>
<% valign = field.dig('preferences', 'valign') %>
<% color = field.dig('preferences', 'color') %>
<% bg_color = field.dig('preferences', 'background') %>
<% font = field.dig('preferences', 'font') %>
<% font_type = field.dig('preferences', 'font_type') %>
<% font_size_px = (field.dig('preferences', 'font_size').presence || Submissions::GenerateResultAttachments::FONT_SIZE).to_i * local_assigns.fetch(:font_scale) { 1000.0 / PdfUtils::US_LETTER_W } %>
<field-value dir="auto" aria-hidden="true" class="flex absolute <%= 'font-courier' if font == 'Courier' %> <%= 'font-times' if font == 'Times' %> <%= 'font-bold' if font_type == 'bold' || font_type == 'bold_italic' %> <%= 'italic' if font_type == 'italic' || font_type == 'bold_italic' %> <%= align == 'right' ? 'text-right' : (align == 'center' ? 'text-center' : '') %>" style="<%= "color: #{color}; " if color.present? && color.match?(Templates::COLOR_REGEXP) %><%= "background: #{bg_color}; " if bg_color.present? && bg_color.match?(Templates::COLOR_REGEXP) %>width: <%= area['w'].to_f * 100 %>%; height: <%= area['h'].to_f * 100 %>%; left: <%= area['x'].to_f * 100 %>%; top: <%= area['y'].to_f * 100 %>%; font-size: <%= fs = "clamp(1pt, #{font_size_px / 10}vw, #{font_size_px}px)" %>; line-height: calc(<%= fs %> * 1.3); font-size: <%= fs = "#{font_size_px / 10}cqmin" %>; line-height: calc(<%= fs %> * 1.3)">
  <% if field['type'] == 'signature' %>
    <% is_narrow = area['h'].to_f.positive? && ((area['w'].to_f * local_assigns[:page_width]) / (area['h'].to_f * local_assigns[:page_height])) > 4.5 %>
    <div class="flex justify-between w-full h-full gap-1 <%= is_narrow && (local_assigns[:with_signature_id] || field.dig('preferences', 'reason_field_uuid').present?) ? 'flex-row' : 'flex-col' %>">
      <div class="flex overflow-hidden <%= is_narrow && (local_assigns[:with_signature_id] || field.dig('preferences', 'reason_field_uuid').present?) ? 'w-1/2' : 'flex-grow' %>" style="min-height: 50%">
        <img class="object-contain mx-auto" src="<%= attachments_index[value].url(time: ActiveStorage::Attachment.service_url_time) %>" alt="<%= field['name'].presence || field['title'].presence || field['type'] %>">
      </div>
      <% if (local_assigns[:with_signature_id] || field.dig('preferences', 'reason_field_uuid').present?) && attachment = attachments_index[value] %>
        <div class="text-[1vw] lg:text-[0.55rem] lg:leading-[0.65rem] <%= is_narrow ? 'w-1/2' : 'w-full' %>">
          <div class="truncate uppercase">
            ID: <%= attachment.uuid %>
          </div>
          <% if local_assigns[:with_signature_id_reason] != false %>
            <div>
              <% reason_value = submitter.values[field.dig('preferences', 'reason_field_uuid')].presence %>
              <% if reason_value %><%= t('reason') %>: <% end %><%= reason_value || t('digitally_signed_by') %> <%= submitter.name %>
              <% if submitter.email %>
                &lt;<%= submitter.email %>&gt;
              <% end %>
            </div>
          <% end %>
          <div>
            <% timezone = local_assigns[:with_submitter_timezone] ? (submitter.timezone || local_assigns[:timezone]) : local_assigns[:timezone] %>
            <% time_format = local_assigns[:with_timestamp_seconds] ? :detailed : :long %>
            <%= l(attachment.created_at.in_time_zone(timezone), format: time_format, locale: local_assigns[:locale]) %> <%= TimeUtils.timezone_abbr(timezone, attachment.created_at) %>
          </div>
        </div>
      <% end %>
    </div>
  <% elsif field['type'].in?(['image', 'initials', 'stamp', 'kba']) && attachments_index[value].image? %>
    <img class="object-contain mx-auto" src="<%= attachments_index[value].url(time: ActiveStorage::Attachment.service_url_time) %>" loading="lazy" alt="<%= field['name'].presence || field['title'].presence || field['type'] %>">
  <% elsif field['type'].in?(['file', 'payment', 'image']) %>
    <autosize-field></autosize-field>
    <div class="px-0.5 flex flex-col justify-center">
      <% Array.wrap(value).each do |val| %>
        <a target="_blank" href="<%= attachments_index[val].url %>">
          <%= svg_icon('paperclip', class: 'inline w-[1.6vw] h-[1.6vw] lg:w-4 lg:h-4') %>
          <%= attachments_index[val].filename %>
        </a>
      <% end %>
    </div>
  <% elsif field['type'] == 'checkbox' %>
    <div class="w-full flex items-center justify-center">
      <span class="sr-only">☑</span>
      <%= svg_icon('check', class: "aspect-square #{area['w'] > area['h'] ? '!w-auto !h-full' : '!w-full !h-auto'}") %>
    </div>
  <% elsif field['type'].in?(%w[multiple radio]) && area['option_uuid'] %>
    <% if (option = field['options']&.find { |o| o['uuid'] == area['option_uuid'] }) %>
      <% option_name = option['value'].presence || "Option #{field['options'].index(option) + 1}" %>
      <% if Array.wrap(value).include?(option_name) %>
        <div class="w-full flex items-center justify-center">
          <span class="sr-only">☑</span>
          <%= svg_icon('check', class: "aspect-square #{area['w'] > area['h'] ? '!w-auto !h-full' : '!w-full !h-auto'}") %>
        </div>
      <% end %>
    <% end %>
  <% elsif field['type'] == 'cells' && area['cell_w'].to_f > 0.0 %>
    <% cell_width = area['cell_w'].to_f / area['w'] * 100 %>
    <div class="w-full flex <%= valign == 'top' ? 'items-start' : (valign == 'bottom' ? 'items-end' : 'items-center') %> <%= 'justify-end' if align == 'right' %>">
      <% (0..(area['w'].to_f / area['cell_w']).ceil).each do |index| %>
        <% if value[index] %>
          <div class="text-center flex-none" style="width: <%= cell_width %>%;"><%= value[index] %></div>
        <% end %>
      <% end %>
    </div>
  <% elsif field['type'] == 'date' %>
    <autosize-field></autosize-field>
    <div class="flex w-full px-0.5 <%= valign == 'top' ? 'items-start' : (valign == 'bottom' ? 'items-end' : 'items-center') %>">
      <% tz = local_assigns[:with_submitter_timezone] ? (submitter.timezone.presence || local_assigns[:timezone]) : local_assigns[:timezone] %>
      <div class="w-full"><%= value == '{{date}}' ? TimeUtils.format_date_preview(field.dig('preferences', 'format'), local_assigns[:locale], tz) : TimeUtils.format_date_string(value, field.dig('preferences', 'format'), local_assigns[:locale], timezone: tz) %></div>
    </div>
  <% elsif field['type'] == 'number' %>
    <autosize-field></autosize-field>
    <div class="flex w-full px-0.5 whitespace-nowrap <%= valign == 'top' ? 'items-start' : (valign == 'bottom' ? 'items-end' : 'items-center') %>">
      <div class="w-full"><%= NumberUtils.format_number(value, field.dig('preferences', 'format')) %></div>
    </div>
  <% elsif field['type'] == 'strikethrough' %>
    <div class="w-full h-full flex items-center justify-center">
      <% if (((1000.0 / local_assigns[:page_width]) * local_assigns[:page_height]) * area['h'].to_f) < 40 %>
        <svg width="100%" height="100%">
          <line x1="0" y1="50%" x2="100%" y2="50%" stroke="<%= color.present? && color.match?(Templates::COLOR_REGEXP) ? color : 'red' %>" style="stroke-width: clamp(0px, 0.5vw, 6px); stroke-width: 0.6cqmin"></line>
        </svg>
      <% else %>
        <svg xmlns="http://www.w3.org/2000/svg" style="overflow: visible; width: calc(100% - 6px); height: calc(100% - 6px); width: calc(100% - 0.6cqmin); height: calc(100% - 0.6cqmin)">
          <line x1="0" y1="0" x2="100%" y2="100%" stroke="<%= color.present? && color.match?(Templates::COLOR_REGEXP) ? color : 'red' %>" style="stroke-width: clamp(0px, 0.5vw, 6px); stroke-width: 0.6cqmin"></line>
          <line x1="100%" y1="0" x2="0" y2="100%" stroke="<%= color.present? && color.match?(Templates::COLOR_REGEXP) ? color : 'red' %>" style="stroke-width: clamp(0px, 0.5vw, 6px); stroke-width: 0.6cqmin"></line>
        </svg>
      <% end %>
    </div>
  <% else %>
    <autosize-field></autosize-field>
    <div class="flex w-full px-0.5 whitespace-pre-wrap <%= valign == 'top' ? 'items-start' : (valign == 'bottom' ? 'items-end' : 'items-center') %>">
      <div class="w-full"><%= Array.wrap(value).join(', ') %></div>
    </div>
  <% end %>
</field-value>
