<div>
  <label for="name" class="inline-block mb-2">
    <span class="text-sm font-bold sm:text-base">お名前</span>
    <span class="bg-red-100 text-red-800 text-xs font-semibold ml-2 px-2.5 py-0.5 rounded-full">必須</span>
  </label>
  <div>
    <input
      name="name"
      type="text"
      value="{{ name.value }}"
      placeholder="例）山田 太郎"
      autocomplete="name"
      id="name"
      data-validator="name"
      class="w-full md:w-6/12 px-3 py-2 text-gray-800 transition duration-100 border border-gray-200 rounded-md outline-none bg-gray-50 [&.invalid]:border-red-500 [&.invalid]:bg-red-100 focus:ring ring-blue-300 scroll-mt-24 lg:scroll-mt-12{% if name.invalid %} invalid{% endif %}"
      aria-required="true"
      aria-describedby="name-v-required-message"
      aria-invalid="{{ name.invalid ? 'true' : 'false' }}"
    />
    <input type="hidden" name="field[]" value="name" />
    <input type="hidden" name="name:v#required" id="name-v-required" />
    <input type="hidden" name="name:c" value="KV" />
  </div>
  <div role="alert" aria-live="assertive">
    <div
      id="name-v-required-message"
      data-validator-label="name-v-required"
      class="validator-result-{% if name.v.required %}0{% endif %}"
    >
      <span class="flex w-full mt-2 text-red-600 [&>svg]:text-foreground">
        <span aria-hidden="true">
          <svg
            class="w-5 h-5 -translate-y-0.5"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
            />
          </svg>
        </span>
        <span class="ml-2 mb-1 font-bold leading-none tracking-tight">お名前を入力してください</span>
      </span>
    </div>
  </div>
</div>

<div class="mt-8">
  <label for="email" class="inline-blockmb-2">
    <span class="text-sm font-bold sm:text-base">メールアドレス</span>
    <span class="bg-red-100 text-red-800 text-xs font-semibold ml-2 px-2.5 py-0.5 rounded-full">必須</span>
  </label>
  <div class="mt-2">
    <input
      name="email"
      type="email"
      value="{{ email.value }}"
      autocomplete="email"
      placeholder="例）yamada@example.com"
      id="email"
      class="w-full px-3 py-2 text-gray-800 transition duration-100 border border-gray-200 rounded-md outline-none bg-gray-50 [&.invalid]:border-red-500 [&.invalid]:bg-red-100 focus:ring ring-blue-300 scroll-mt-24 lg:scroll-mt-12{% if email.invalid %} invalid{% endif %}"
      data-validator="email"
      aria-required="true"
      aria-describedby="email-help-message email-v-required-message email-v-email-message"
      aria-invalid="{{ email.invalid ? 'true' : 'false' }}"
    />

    <input type="hidden" name="field[]" value="email" />
    <input type="hidden" name="email:v#required" id="email-v-required" />
    <input type="hidden" name="email:v#email" id="email-v-email" />
  </div>

  <p id="email-help-message" class="mt-3 text-sm leading-6 text-gray-600">
    半角英数字で入力してください。
  </p>

  <div role="alert" aria-live="assertive">
    <div
      id="email-v-required-message"
      data-validator-label="email-v-required"
      class="validator-result-{% if email.v.required %}0{% endif %}"
    >
      <span class="flex w-full mt-2 text-red-600 [&>svg]:text-foreground">
        <span aria-hidden="true">
          <svg
            class="w-5 h-5 -translate-y-0.5"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
            />
          </svg>
        </span>
        <span class="ml-2 mb-1 font-bold leading-none tracking-tight">メールアドレスを入力してください</span>
      </span>
    </div>
    <div
      id="email-v-email-message"
      data-validator-label="email-v-email"
      class="validator-result-{% if email.v.email %}0{% endif %}"
    >
      <span class="flex w-full mt-2 text-red-600 [&>svg]:text-foreground">
        <span aria-hidden="true">
          <svg
            class="w-5 h-5 -translate-y-0.5"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
            />
          </svg>
        </span>
        <span class="ml-2 mb-1 font-bold leading-none tracking-tight">正しいメールアドレスを入力してください</span>
      </span>
    </div>
  </div>
</div>

<div class="mt-8">
  <label for="description" class="inline-block mb-2">
    <span class="text-sm font-bold sm:text-base">お問い合わせ種別</span>
    <span class="bg-red-100 text-red-800 text-xs font-semibold ml-2 px-2.5 py-0.5 rounded-full">必須</span>
  </label>
  <div class="mt-2">
    <select
      id="description"
      name="description"
      data-validator="description"
      class="appearance-none block w-full md:w-6/12 pl-3 pr-10 py-2 text-gray-800 transition duration-100 border border-gray-200 rounded-md outline-none focus:ring ring-blue-300 bg-(image:--bg-select) bg-[right_1rem_center] bg-no-repeat bg-[length:1rem_auto] [&.invalid]:border-red-500 [&.invalid]:bg-red-100 scroll-mt-24 lg:scroll-mt-12{% if description.invalid %} invalid{% endif %}"
      aria-required="true"
      aria-describedby="description-v-required-message"
      aria-invalid="{{ description.invalid ? 'true' : 'false' }}"
    >
      <option value="">
        選択してください
      </option>
      <option value="お仕事のご依頼・ご相談" {{ description.value|selected('お仕事のご依頼・ご相談') }}>
        お仕事のご依頼・ご相談
      </option>
      <option value="記事内容について" {{ description.value|selected('記事内容について') }}>
        記事内容について
      </option>
      <option value="その他のお問い合わせ" {{ description.value|selected('その他のお問い合わせ') }}>
        その他のお問い合わせ
      </option>
    </select>
    <input type="hidden" name="field[]" value="description" />
    <input type="hidden" name="description:v#required" id="description-v-required" />
  </div>

  <div role="alert" aria-live="assertive">
    <div
      id="description-v-required-message"
      data-validator-label="description-v-required"
      class="validator-result-{% if description.v.required %}0{% endif %}"
    >
      <span class="flex w-full mt-2 text-red-600 [&>svg]:text-foreground">
        <span aria-hidden="true">
          <svg
            class="w-5 h-5 -translate-y-0.5"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
            />
          </svg>
        </span>
        <span class="ml-2 mb-1 font-bold leading-none tracking-tight">お問い合わせ種別を選択してください</span>
      </span>
    </div>
  </div>
</div>

<div class="mt-8">
  <label for="inquiry" class="inline-block mb-2">
    <span class="text-sm font-bold sm:text-base">お問い合わせ内容</span>
    <span class="bg-red-100 text-red-800 text-xs font-semibold ml-2 px-2.5 py-0.5 rounded-full">必須</span>
  </label>
  <div>
    <!-- prettier-ignore-start -->
    <textarea
      name="inquiry"
      id="inquiry"
      rows="4"
      data-validator="inquiry"
      class="w-full px-3 py-2 text-gray-800 transition duration-100 border border-gray-200 rounded-md outline-none bg-gray-50 [&.invalid]:border-red-500 [&.invalid]:bg-red-100 focus:ring ring-blue-300 scroll-mt-24 lg:scroll-mt-12{% if inquiry.invalid %} invalid{% endif %}"
      aria-required="true"
      aria-describedby="inquiry-v-required-message"
      aria-invalid="{{ inquiry.invalid ? 'true' : 'false' }}"
    >{{ inquiry.value }}</textarea>
    <!-- prettier-ignore-end -->
    <input type="hidden" name="field[]" value="inquiry" />
    <input type="hidden" name="inquiry:v#required" id="inquiry-v-required" />
  </div>

  <div role="alert" aria-live="assertive">
    <div
      id="inquiry-v-required-message"
      data-validator-label="inquiry-v-required"
      class="validator-result-{% if inquiry.v.required %}0{% endif %}"
    >
      <span class="flex w-full mt-2 text-red-600 [&>svg]:text-foreground">
        <span aria-hidden="true">
          <svg
            class="w-5 h-5 -translate-y-0.5"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
            />
          </svg>
        </span>
        <span class="ml-2 mb-1 font-bold leading-none tracking-tight">お問い合わせ内容を入力してください</span>
      </span>
    </div>
  </div>
</div>

<div class="mt-8">
  <label for="cue" class="inline-block mb-2">
    <span class="text-sm font-bold sm:text-base">このサイトを何で知りましたか？</span>
    <span class="bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">任意</span>
  </label>
  <div role="radiogroup">
    <div class="flex items-center gap-x-3">
      <input
        type="radio"
        name="cue"
        value="SNS"
        {{ cue.array|checked('SNS') }}
        id="cue-sns"
        class="appearance-none h-4 w-4 border border-gray-200 rounded-full text-indigo-600 focus:ring-indigo-600 bg-no-repeat bg-[length:.5rem_auto] bg-center checked:border-transparent checked:bg-current checked:bg-(image:--bg-circle) scroll-mt-24 lg:scroll-mt-12"
      />
      <label for="cue-sns" class="font-bold cursor-pointer">SNS</label>
    </div>
    <div class="flex items-center gap-x-3 mt-1">
      <input
        type="radio"
        name="cue"
        value="ウェブ検索"
        {{ cue.array|checked('ウェブ検索') }}
        id="cue-search"
        class="appearance-none h-4 w-4 border border-gray-200 rounded-full text-indigo-600 focus:ring-indigo-600 bg-no-repeat bg-[length:.5rem_auto] bg-center checked:border-transparent checked:bg-current checked:bg-(image:--bg-circle) scroll-mt-24 lg:scroll-mt-12"
      />
      <label for="cue-search" class="font-bold cursor-pointer">ウェブ検索</label>
    </div>
    <div class="flex items-center gap-x-3 mt-1">
      <input
        type="radio"
        name="cue"
        value="イベント"
        {{ cue.array|checked('イベント') }}
        id="cue-event"
        class="appearance-none h-4 w-4 border border-gray-200 rounded-full text-indigo-600 focus:ring-indigo-600 bg-no-repeat bg-[length:.5rem_auto] bg-center checked:border-transparent checked:bg-current checked:bg-(image:--bg-circle) scroll-mt-24 lg:scroll-mt-12"
      />
      <label for="cue-event" class="font-bold cursor-pointer">イベント</label>
    </div>
    <div class="flex items-center gap-x-3 mt-1">
      <input
        type="radio"
        name="cue"
        value="その他"
        {{ cue.array|checked('その他') }}
        id="cue-others"
        class="appearance-none h-4 w-4 border border-gray-200 rounded-full text-indigo-600 focus:ring-indigo-600 bg-no-repeat bg-[length:.5rem_auto] bg-center checked:border-transparent checked:bg-current checked:bg-(image:--bg-circle) scroll-mt-24 lg:scroll-mt-12"
      />
      <label for="cue-others" class="font-bold cursor-pointer">その他</label>
    </div>
  </div>
  <input type="hidden" name="field[]" value="cue" />
</div>

<div class="mt-8">
  <label for="privacy" class="inline-block mb-2">
    <span class="text-sm font-bold sm:text-base">プライバシーポリシー</span>
    <span class="bg-red-100 text-red-800 text-xs font-semibold ml-2 px-2.5 py-0.5 rounded-full">必須</span>
  </label>
  <div>
    {% set categoryField = module('V2_Category_Field', null, { cid: CID }) %}

    {% if categoryField.fields.privacy_policy.value %}
      <div class="mb-3">
        {{ include('/include/edit/category-custom.twig', { cid: categoryField.cid }) }}
        <div class="overflow-auto h-60 p-6 border border-gray-200 rounded-md" tabindex="0">
          <p>
            {{ categoryField.fields.privacy_policy.value|nl2br|safe_html }}
          </p>
        </div>
      </div>
    {% endif %}

    <div class="relative flex gap-x-3">
      <div class="flex h-6 items-center">
        <input
          type="checkbox"
          name="privacy[]"
          value="1"
          {{ privacy.value|checked(1) }}
          id="privacy"
          data-validator="privacy"
          class="appearance-none h-4 w-4 border border-gray-200 [&.invalid]:border-red-500 rounded-md text-indigo-600 focus:ring-indigo-600 bg-[length:.75rem_auto] bg-center bg-no-repeat checked:border-transparent checked:bg-current checked:bg-(image:--bg-check) scroll-mt-24 lg:scroll-mt-12{% if privacy.invalid %} invalid{% endif %}"
          aria-required="true"
          aria-describedby="privacy-v-required-message"
          aria-invalid="{{ privacy.invalid ? 'true' : 'false' }}"
        />
      </div>
      <div class="leading-6">
        <label for="privacy" class="font-bold cursor-pointer">上記のプライバシーポリシーに同意する</label>
      </div>
    </div>
    <input type="hidden" name="field[]" value="privacy" />
    <input type="hidden" name="privacy:v#required" id="privacy-v-required" />
  </div>

  <div role="alert" aria-live="assertive">
    <div
      id="privacy-v-required-message"
      data-validator-label="privacy-v-required"
      class="validator-result-{% if privacy.v.required %}0{% endif %}"
    >
      <span class="flex w-full mt-2 text-red-600 [&>svg]:text-foreground">
        <span aria-hidden="true">
          <svg
            class="w-5 h-5 -translate-y-0.5"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
            />
          </svg>
        </span>
        <span class="ml-2 mb-1 font-bold leading-none tracking-tight">プライバシーポリシーに同意してください</span>
      </span>
    </div>
  </div>
</div>

<!-- お問い合わせNo（件名用） -->
<input type="hidden" name="contactNo" value="{{ Y }}{{ n }}{{ j }}{{ H }}{{ i }}{{ s }}" />
<input type="hidden" name="field[]" value="contactNo" />
