<template>
  <div class="ui mini modal">
    <i class="close icon"></i>
    <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"></i>
            <span class="label">Sélectionner une image ...</span>
          </label>
          <input
            type="file"
            accept="image/jpeg, image/png"
            style="display: none"
            name="image_file"
            class="image_file"
            id="image_file"
          />
          <p class="error-message" style="color: red"></p>
        </div>

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

<script>
export default {
    name: "Feature_edit_modal"
}
</script>