<template>
  <div class="fourteen wide column">
    <h1 class="ui header">Administration des fonds cartographiques</h1>

    <form
      id="form-layers"
      action="."
      method="post"
      enctype="multipart/form-data"
      class="ui form"
    >
      <!--  {% csrf_token %} // todo: add csrf_token in post -->

      {{ formset.management_form }}
      <div class="ui buttons">
        <a
          class="ui compact small icon left floated button green"
          data-variation="mini"
          :data-add-form="formset.prefix + '-ADD'"
        >
          <i class="ui plus icon"></i>
          <span>Créer un fond cartographique</span>
        </a>
      </div>
      <div class="ui" :data-segments="formset.prefix + '-SEGMENTS'">
        <!-- {% for form in formset.forms %} {% include
        'geocontrib/project/project_mapping_basemap.html' with formset=formset
        form=form is_empty=False %} {% endfor %} -->
        <ProjectMappingBasemap
          v-for="form in formset.forms"
          :key="form.id"
          :form="formset.empty_form"
        />
        // * need form datas from back
        <fieldset disabled="disabled" style="display: none">
          <div
            class="formset_hidden"
            :data-empty-form="formset.prefix + '-EMPTY'"
            style="display: none"
          >
            <ProjectMappingBasemap :form="formset.empty_form" />
            <!-- {% include 'geocontrib/project/project_mapping_basemap.html' with
            formset=formset form=formset.empty_form is_empty=True %} -->
          </div>
        </fieldset>
      </div>

      <button type="submit" class="ui teal icon floated button">
        <i class="white save icon"></i> Enregistrer les changements
      </button>
    </form>
  </div>
</template>

<script>
// todo: add script |-> import (or not ?) from "@/assets/js/nested_formset_handlers.js"
//import Project_mapping_basemap from "@/components/project/project_mapping_basemap.vue"
import Project_mapping_basemap from "@/components/project/project_mapping_basemap.vue";

export default {
  name: "Project_mapping",

  components: {
    ProjectMappingBasemap: Project_mapping_basemap,
  },

  data() {
    return {
      formset: {
        non_form_errors: null,
        empty_form: {
          non_form_errors: null,
          management_form: null,
          forms: [
            {
              title: {
                value: "test",
              },
            },
          ],
          prefix: null,
          hidden_fields: null,
          title: {
            id_for_label: null,
            field: {
              max_length: null,
            },
          },
          nested: {
            management_form: null,
          },
        },
        management_form: null,
        forms: [],
        prefix: null,
        hidden_fields: null,
        title: {
          id_for_label: null,
          field: {
            max_length: null,
          },
        },
        nested: {
          management_form: null,
        },
      },
    };
  },
};
</script>