{% load i18n %}

{% if widget.sized_url %}
<div class="sizedimage-mod preview">
  <label class="versatileimagefield-label">{% trans "Primary Point of Interest" %}</label>
  <div class="image-wrap outer">
    <div class="point-stage" id="{{ widget.point_stage_id }}"
         data-image_preview_id="{{ widget.image_preview_id }}"
    >
      <div class="ppoi-point" id="{{ widget.ppoi_id }}"></div>
    </div>
    {% if widget.value and widget.sized_url %}
      <div class="image-wrap inner">
        <img src="{{ widget.sized_url }}" id="{{ widget.image_preview_id }}"
             data-hidden_field_id="{{ widget.hidden_field_id }}"
             data-point_stage_id="{{ widget.point_stage_id }}"
             data-ppoi_id="{{ widget.ppoi_id }}" class="sizedimage-preview"
        />
      </div>
    {% endif %}
  </div>
</div>
{% endif %}
<div class="sizedimage-mod new-upload">
  <div
    class="border border-base-200 flex items-center overflow-hidden rounded shadow-sm text-sm max-w-2xl dark:border-base-700"
  >
    {% if widget.is_initial and not widget.required %}
      <div
        class="bg-base-50 border-r border-base-200 flex flex-none items-center self-stretch px-3 dark:bg-white/[.02] dark:border-base-700 dark:text-font-default-dark"
      >
        <label for="{{ widget.checkbox_id }}" class="flex items-center">
          <input type="checkbox"{% if widget.class %} class="{{ widget.class }}"{% endif %}
                 name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}"
          />

          <span class="ml-2">
                    {{ widget.clear_checkbox_label }}
                </span>
        </label>
      </div>
    {% endif %}

    <input type="text" aria-label="{% trans 'Choose file to upload' %}"
           value="{% if widget.value %}{{ widget.value.url }}{% else %}{% trans 'Choose file to upload' %}{% endif %}"
           disabled class="bg-white flex-grow font-medium min-w-0 px-3 py-2 text-ellipsis dark:bg-base-900"
    >
    <div class="bg-white flex flex-none items-center leading-none self-stretch dark:bg-base-900">
      <div class="hidden">
        <input type="{{ widget.type }}" name="{{ widget.name }}" {% include "django/forms/widgets/attrs.html" %} />
      </div>

      {% if widget.is_initial %}
        <a href="{{ widget.value.url }}"
           class="border-r border-base-200 cursor-pointer text-base-400 px-3 hover:text-base-700 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200"
           target="_blank"
        >
          <span class="material-symbols-outlined">download</span>
        </a>
      {% endif %}

      <label for="{{ widget.attrs.id }}"
             class="cursor-pointer text-base-400 px-3 hover:text-base-700 dark:text-base-500 dark:hover:text-base-200"
      >
        <span class="material-symbols-outlined">upload</span>
      </label>
    </div>
  </div>

</div>