
{%- liquid
  unless product
    assign product = section.settings.product
  endunless
  if product == blank 
    continue
  endif
  unless product.available
    continue
  endunless
-%}
<button class="hdt-pr-popup__ask hdt-s-text hdt-text-base hdt-font-semibold" aria-controls="modal-contactFormAsk">
  <span class="hdt-product__extra-icon"><svg class="hdt-inline-block" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"><path d="M10 20C4.477 20 0 15.523 0 10C0 4.477 4.477 0 10 0C15.523 0 20 4.477 20 10C20 15.523 15.523 20 10 20ZM10 18C12.1217 18 14.1566 17.1571 15.6569 15.6569C17.1571 14.1566 18 12.1217 18 10C18 7.87827 17.1571 5.84344 15.6569 4.34315C14.1566 2.84285 12.1217 2 10 2C7.87827 2 5.84344 2.84285 4.34315 4.34315C2.84285 5.84344 2 7.87827 2 10C2 12.1217 2.84285 14.1566 4.34315 15.6569C5.84344 17.1571 7.87827 18 10 18ZM9 13H11V15H9V13ZM11 11.355V12H9V10.5C9 10.2348 9.10536 9.98043 9.29289 9.79289C9.48043 9.60536 9.73478 9.5 10 9.5C10.2841 9.49998 10.5623 9.4193 10.8023 9.26733C11.0423 9.11536 11.2343 8.89837 11.3558 8.64158C11.4773 8.3848 11.5234 8.0988 11.4887 7.81684C11.454 7.53489 11.34 7.26858 11.1598 7.04891C10.9797 6.82924 10.7409 6.66523 10.4712 6.57597C10.2015 6.48671 9.91204 6.47587 9.63643 6.54471C9.36081 6.61354 9.11042 6.75923 8.91437 6.96482C8.71832 7.1704 8.58468 7.42743 8.529 7.706L6.567 7.313C6.68863 6.70508 6.96951 6.14037 7.38092 5.67659C7.79233 5.2128 8.31952 4.86658 8.90859 4.67332C9.49766 4.48006 10.1275 4.44669 10.7337 4.57661C11.3399 4.70654 11.9007 4.99511 12.3588 5.41282C12.8169 5.83054 13.1559 6.36241 13.3411 6.95406C13.5263 7.54572 13.5511 8.17594 13.4129 8.78031C13.2747 9.38467 12.9785 9.9415 12.5545 10.3939C12.1306 10.8462 11.5941 11.1779 11 11.355Z"></path></svg></span>
  {{ 'products.product.ask_question' | t }}
</button>
<hdt-modal id="modal-contactFormAsk" class="hdt-modal-popup__ask hdt-product__modal hdt-modal hdt-hidden" color-scheme="{{ settings.color_scheme_dialog }}" config='{"appendToBody": true}'>
  <h3 slot="header" class="hdt-product__modal-title hdt-s-text hdt-font-normal">{{ 'products.product.ask_question' | t }}</h3>
  {% comment %} <div class="hdt-pr-popup__ask-head hdt-flex hdt-align-center">
      {%- if image != blank -%}
      <div class="hdt-pr-popup__ask-img hdt-relative hdt-oh hdt-rounded-full">
        {{ image | image_url: width: image.width | image_tag: loading: 'lazy', width: image.width, height: image.height, sizes: '(max-width: 767px) 80px, 160px', widths: '80, 160' }}
      </div>
      {%- endif -%}
      <div class="hdt-pr-popup__ask-infos">
        <div class="hdt-pr-popup__ask-title">{{ product.title }}</div>
        <div class="hdt-pr-popup__ask-price">{%- if product.compare_at_price > product.price -%} <del>{{ product.compare_at_price | money }}</del> <ins>{{ product.price | money }}</ins>{%- else -%}{{ product.price | money }}{%- endif -%}</div>
      </div>
  </div> {% endcomment %}
  {%- assign formId = 'ContactFormAsk' | append: product.id -%}
  {%- form 'contact', id: formId -%}
    {%- liquid
      assign name          = 'templates.contact.form.name'
      assign phone         = 'templates.contact.form.phone'
      capture status_ask_mirror
      echo '<div class="hdt-order-last form-status-mirror-' | append: formId | append: '" style="display: none">'
      capture status_ask
        render 'form-status', form: form, form_id: formId
      endcapture
      echo status_ask
      echo '</div>'
      endcapture
      echo status_ask
      -%}
    <p>
      <label for="{{ formId }}-name" class="hdt-s-text2 hdt-block">{{ 'templates.contact.form.name' | t }}</label>
      <input type="text" id="{{ formId }}-name" name="contact[name]" required="required" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
    </p>
    <p>
      <label for="{{ formId }}-email" class="hdt-s-text2 hdt-block">{{ 'templates.contact.form.email' | t }}</label>
      <input type="email" id="{{ formId }}-email" name="contact[email]" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}" aria-required="true" required="required"
      {%- if form.errors contains 'email' %} class="input--error" aria-invalid="true" aria-describedby="{{ formId }}-email-error"{%- endif -%}>
    </p>
    {%- if block.settings.show_phone -%}
      <p>
        <label for="{{ formId }}-phone" class="hdt-s-text2 hdt-block">{{ 'templates.contact.form.phone' | t }}</label>
        <input type="tel" id="{{ formId }}-phone" name="contact[phone]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
      </p>
    {%- endif -%}
    <p class="hdt-hidden">
      <label for="{{ formId }}-product">Product</label>
      <textarea rows="20" id="{{ formId }}-product" name="contact[product]" required="required">{{ product.title }} - {{ request.origin }}{{ product.url }}</textarea>
    </p>
    <p>
      <label for="{{ formId }}-message" class="hdt-s-text2 hdt-block">{{ 'templates.contact.form.message' | t }}</label>
      <textarea rows="8" id="{{ formId }}-message" name="contact[body]" required="required">{% if form.body %}{{ form.body }}{% endif %}</textarea>
    </p>
    <button type="submit" class="hdt-inline-flex hdt-align-center hdt-justify-center hdt-relative hdt-btn hdt-oh hdt-btn-solid hdt-font-semibold"><span class="hdt-truncate">{{ 'templates.contact.form.send' | t }}</span></button>
  {%- endform -%}
</hdt-modal>
{{ status_ask_mirror }}
{% schema %}
{
  "name": "Ask a question",
  "tag": null,
  "settings": [
    {
      "type": "checkbox",
      "id": "show_phone",
      "label": "t:sections.main-product.blocks.extra_link.settings.show_phone.label",
      "default": true
    }
  ],
  "presets": [
    { 
      "name": "Ask a question",
    }
  ]
}
{% endschema %}
