{%- comment -%}
  Renders gift card recipient form.
  Accepts:
  - product: {Object} product object.
  - form: {Object} the product form object.
  - section: {Object} section to which this snippet belongs.
  - form_id: {String}

  Usage:
  {% render 'gift-card-recipient-form', product: product, form: form, section: section %}
{%- endcomment -%}

{%- assign gift_card_recipient_control_flag = 'properties[__shopify_send_gift_card_to_recipient]' -%}

<hdt-recipient-form class="hdt-recipient-form" data-section-id="{{ section.id }}" form="{{ form_id }}">
  <input class="hdt-recipient-checkbox" id="Recipient-checkbox-{{ section.id }}" type="checkbox" name="{{ gift_card_recipient_control_flag }}" disabled>
  <label class="hdt-recipient-label hdt-s-text hdt-font-semibold" for="Recipient-checkbox-{{ section.id }}"><span>{{ 'recipient.form.checkbox' | t }}</span></label>

  <div class="hdt-form__message-wrapper hdt-form-message--error" role="alert"{% unless form.errors %} hidden{% endunless %}>
    <h2 class="hdt-form__message" tabindex="-1" autofocus>{% render 'icon' with 'error' %} <span class="hdt-error-message">{{ 'templates.contact.form.error_heading' | t }}</span></h2>
    <ul>
      {%- if form.errors -%}
        {%- for field in form.errors -%}
          <li>
            {%- if field == 'form' -%}
              {{ form.errors.messages[field] }}
            {%- else -%}
              <a href="#Recipient-{{ field }}-{{ section.id }}">
                {{ form.errors.messages[field] }}
              </a>
            {%- endif -%}
          </li>
        {%- endfor -%}
      {%- endif -%}
    </ul>
  </div>
  <p id="Recipient-fields-live-region-{{ section.id }}" class="sr-only" role="status" data-expanded="{{ 'recipient.form.expanded' | t | escape }}" data-collapsed="{{ 'recipient.form.collapsed' | t | escape }}">{{ 'recipient.form.collapsed' | t }}</p>
  <div class="hdt-recipient-fields">
    <div class="hdt-recipient-fields__field">
      <div class="hdt-field">
        <input class="hdt-field__input hdt-input" id="Recipient-email-{{ section.id }}" type="email" name="properties[Recipient email]" placeholder="{{ 'recipient.form.email_label' | t | escape }}" value="{{ form.email }}"{% if form.errors contains 'email' %} aria-invalid="true" aria-describedby="RecipientForm-email-error-{{ section.id }}"{% endif %}>
        <label class="hdt-field__label" for="Recipient-email-{{ section.id }}">
          <span class="hdt-recipient-email-label required">{{ 'recipient.form.email_label' | t }}</span>
          <span class="hdt-recipient-email-label optional">{{ 'recipient.form.email_label_optional_for_no_js_behavior' | t }}</span>
        </label>
      </div>
      <div id="RecipientForm-email-error-{{ section.id }}" class="hdt-form__message"{% unless form.errors contains 'email' %} hidden{% endunless %}>
        {% render 'icon' with 'error' %}
        <span class="hdt-error-message hdt-text-sm">{% if form.errors contains 'email' %}{{ form.errors.messages.email }}.{% endif %}</span>
      </div>
    </div>
    <div class="hdt-recipient-fields__field">
      <div class="hdt-field">
        <input class="hdt-field__input hdt-input" autocomplete="name" type="text" id="Recipient-name-{{ section.id }}" name="properties[Recipient name]" placeholder="{{ 'recipient.form.name_label' | t | escape }}" value="{{ form.name }}"{% if form.errors contains 'name' %} aria-invalid="true" aria-describedby="RecipientForm-name-error-{{ section.id }}"{% endif %}>
        <label class="hdt-field__label" for="Recipient-name-{{ section.id }}">{{- 'recipient.form.name_label' | t -}}</label>
      </div>
      <div id="RecipientForm-name-error-{{ section.id }}" class="hdt-form__message"{% unless form.errors contains 'name' %} hidden{% endunless %}>
        {% render 'icon' with 'error' %}
        <span class="hdt-error-message hdt-text-sm">{%- if form.errors contains 'name' -%}{{ form.errors.messages.name }}.{%- endif -%}</span>
      </div>
    </div>
    <div class="hdt-recipient-fields__field" style="margin-bottom:1rem">
      {%- assign max_chars_message = 200 -%}
      {%- assign max_chars_message_rendered = 'recipient.form.max_characters' | t: max_chars: max_chars_message -%}
      {%- assign message_label_rendered = 'recipient.form.message_label' | t -%}
      <div class="hdt-field">
        <textarea rows="4" id="Recipient-message-{{ section.id }}" class="hdt-field__input hdt-textarea" name="properties[Message]" maxlength="{{ max_chars_message }}" placeholder="{{ message_label_rendered | escape }}" aria-label="{{ message_label_rendered }} {{ max_chars_message_rendered }}"{% if form.errors contains 'message' %} aria-invalid="true" aria-describedby="RecipientForm-message-error-{{ section.id }}"{% endif %}>{{ form.message }}</textarea>
        <label class="hdt-field__label" for="Recipient-message-{{ section.id }}">{{ message_label_rendered }}</label>
      </div>
      <label class="hdt-field__label hdt-field__label--chars hdt-text-sm hdt-text-right hdt-s-text hdt-block" style="max-width:100%"><span>{{ max_chars_message_rendered }}</span></label>

      <div id="RecipientForm-message-error-{{ section.id }}" class="hdt-form__message"{% unless form.errors contains 'message' %} hidden{% endunless %}>
        {% render 'icon' with 'error' %}
        <span class="hdt-error-message hdt-text-sm">{%- if form.errors contains 'message' -%}{{ form.errors.messages.message }}.{%- endif -%}</span>
      </div>
    </div>
    <div class="hdt-recipient-fields__field" style="margin-bottom:0">
      <div class="hdt-field">
        <input class="hdt-field__input hdt-input hdt-s-text hdt-font-semibold" autocomplete="send_on" type="date" id="Recipient-send-on-{{ section.id }}" name="properties[Send on]" placeholder="{{ 'recipient.form.send_on_label' | t | escape }}" pattern="\d{4}-\d{2}-\d{2}" value="{{ form.send_on }}"{% if form.errors contains 'send_on' %} aria-invalid="true" aria-describedby="RecipientForm-send_on-error-{{ section.id }}"{% endif %} placeholder="{{ 'recipient.form.send_on_label' | t }}" >
        <label class="hdt-field__label" for="Recipient-send-on-{{ section.id }}">{{ 'recipient.form.send_on_label' | t }}</label>
      </div>
      <div id="RecipientForm-send_on-error-{{ section.id }}" class="hdt-form__message"{% unless form.errors contains 'send_on' %} hidden{% endunless %}>
        {% render 'icon' with 'error' %} <span class="hdt-error-message hdt-text-sm">{%- if form.errors contains 'send_on' -%}{{ form.errors.messages.send_on }}.{%- endif -%}</span>
      </div>
    </div>
  </div>
  <input type="hidden" name="{{ gift_card_recipient_control_flag }}" value="if_present" id="Recipient-control-{{ section.id }}">
  <input type="hidden" name="properties[__shopify_offset]" value="" id="Recipient-timezone-offset-{{ section.id }}" disabled>
</hdt-recipient-form>