<template>
  <div class="ui mini modal">
    <i
      class="close icon"
      aria-hidden="true"
    />
    <div class="content">
      <h3>Importer une image géoréférencée</h3>
      <form
        id="form-geo-image"
        class="ui form"
        enctype="multipart/form-data"
      >
        {% csrf_token %}
        <p>
          Attention, si vous avez déjà saisi une géométrie, celle issue de
          l'image importée l'écrasera.
        </p>

        <div class="field">
          <label>Image (png ou jpeg)</label>
          <label
            class="ui icon button"
            for="image_file"
          >
            <i
              class="file icon"
              aria-hidden="true"
            />
            <span class="label">Sélectionner une image ...</span>
          </label>
          <input
            id="image_file"
            type="file"
            accept="image/jpeg, image/png"
            style="display: none"
            name="image_file"
            class="image_file"
          >
          <p
            class="error-message"
            style="color: red"
          />
        </div>

        <button
          id="get-geom-from-image-file"
          type="button"
          class="ui positive right labeled icon button"
        >
          Importer
          <i
            class="checkmark icon"
            aria-hidden="true"
          />
        </button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FeatureEditModal'
};
</script>