<template>
  <div class="fourteen wide column">
    <form
      id="form-project-edit"
      action="."
      method="post"
      enctype="multipart/form-data"
      class="ui form"
    >
      <div v-if="errors" class="ui error message">
        {{ form.non_field_errors }}

        <span v-for="hidden_field in form.hidden_fields" :key="hidden_field">
          {{ hidden_field.errors }}
          {{ hidden_field }}
        </span>
      </div>
      <i class="close icon"></i>

      <h1>
        <span v-if="action === 'update'"
          >Édition du projet "{{ form.instance.title }}"</span
        >
        <span v-else-if="action === 'create'">Création d'un projet</span>
      </h1>

      <div class="ui horizontal divider">INFORMATIONS</div>

      <div class="two fields">
        <div class="required field">
          <label :for="form.title.id_for_label">{{ form.title.label }}</label>
          <small>{{ form.title.help_text }}</small
          ><!-- | safe -->
          <input
            type="text"
            required
            :maxlength="form.title.field.max_length"
            :name="form.title.html_name"
            :id="form.title.id_for_label"
            :value="form.title.value ? form.title.value : ''"
          />
          {{ form.title.errors }}
        </div>
        <div class="field">
          <label>{{ form.thumbnail.label }}</label>
          {% if form.instance.thumbnail.url %}
          <img
            class="ui small image"
            id="form-input-file-logo"
            :src="form.instance.thumbnail.url"
          />
          {% endif %}
          <label class="ui icon button" :for="form.thumbnail.id_for_label">
            <i class="file icon"></i>
            {% if form.thumbnail.value %}
            <span class="label">{{ form.thumbnail.value }}</span>
            {% else %}
            <span class="label">Sélectionner une image ...</span>
            {% endif %}
          </label>
          <input
            type="file"
            accept="image/jpeg, image/png"
            style="display: none"
            :name="form.thumbnail.html_name"
            :id="form.thumbnail.id_for_label"
            :value="form.thumbnail.value"
          />
          {{ form.thumbnail.errors }}
        </div>
      </div>
      <div class="field">
        <label :for="form.description.id_for_label">{{
          form.description.label
        }}</label>
        <textarea
          v-model="form.description.value"
          :name="form.description.html_name"
          rows="5"
        ></textarea>
        {{ form.description.errors }}
      </div>

      <div class="ui horizontal divider">PARAMÈTRES</div>

      <div class="four fields">
        <div class="field">
          <label :for="form.archive_feature.id_for_label">{{
            form.archive_feature.label
          }}</label>
          <div class="ui right labeled input">
            <input
              type="number"
              min="0"
              style="padding: 1px 2px"
              :name="form.archive_feature.html_name"
              :id="form.archive_feature.id_for_label"
              :value="form.archive_feature.value"
            />
            <div class="ui label">jour(s)</div>
          </div>
          {{ form.archive_feature.errors }}
        </div>
        <div class="field">
          <label :for="form.delete_feature.id_for_label">{{
            form.delete_feature.label
          }}</label>
          <div class="ui right labeled input">
            <input
              type="number"
              min="0"
              style="padding: 1px 2px"
              :name="form.delete_feature.html_name"
              :id="form.delete_feature.id_for_label"
              :value="form.delete_feature.value"
            />
            <div class="ui label">jour(s)</div>
          </div>
          {{ form.delete_feature.errors }}
        </div>
        <div class="required field">
          <label :for="form.access_level_pub_feature.id_for_label">{{
            form.access_level_pub_feature.label
          }}</label>
          <div class="ui selection dropdown">
            <input
              type="hidden"
              :name="form.access_level_pub_feature.html_name"
              :id="form.access_level_pub_feature.id_for_label"
              :value="form.access_level_pub_feature.value"
            />
            <div class="default text"></div>
            <i class="dropdown icon"></i>
            <div class="menu">
              {% for x,y in form.access_level_pub_feature.field.choices %}
              <div
                class="item"
                :data-value="
                  x +
                  (form.access_level_pub_feature.value === x ? selected : '')
                "
              >
                y
              </div>
              {% endfor %}
            </div>
          </div>
          {{ form.access_level_pub_feature.errors }}
        </div>
        <div class="required field">
          <label :for="form.access_level_arch_feature.id_for_label">{{
            form.access_level_arch_feature.label
          }}</label>
          <div class="ui selection dropdown">
            <input
              type="hidden"
              :name="form.access_level_arch_feature.html_name"
              :id="form.access_level_arch_feature.id_for_label"
              :value="form.access_level_arch_feature.value"
            />
            <div class="default text"></div>
            <i class="dropdown icon"></i>
            <div class="menu">
              {% for x,y in form.access_level_arch_feature.field.choices %}
              <!--  <div class="item" data-value="{{ x }}" {% if form.access_level_arch_feature.value == x %} selected{% endif %}>{{ y }}</div> -->
              {% endfor %}
            </div>
          </div>
          {{ form.access_level_arch_feature.errors }}
        </div>
      </div>

      <div class="field">
        <div class="ui checkbox">
          <input
            type="checkbox"
            :checked="form.moderation.value"
            :name="form.moderation.html_name"
            :id="form.moderation.id_for_label"
          />
          <label :for="form.moderation.id_for_label">{{
            form.moderation.label
          }}</label>
        </div>
        {{ form.moderation.errors }}
      </div>

      <div class="field">
        <div class="ui checkbox">
          <input
            type="checkbox"
            :checked="form.is_project_type.value"
            :name="form.is_project_type.html_name"
            :id="form.is_project_type.id_for_label"
          />
          <label :for="form.is_project_type.id_for_label">{{
            form.is_project_type.label
          }}</label>
        </div>
        {{ form.is_project_type.errors }}
      </div>

      <div class="ui divider"></div>

      <!-- {% for hidden_field in form.hidden_fields %} -->
      <!-- pour passer le slug du projet parent entre GET et POST // ? marche en span ? -->
      <span v-for="hidden_field in form.hidden_fields" :key="hidden_field">{{
        hidden_field
      }}</span>

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

<script>
export default {
  name: "Project_edit",

  data() {
    return {
      action: null,
      form: {
        access_level_pub_feature: {
          id_for_label: null,
        },
        access_level_arch_feature: {
          id_for_label: null,
        },
        archive_feature: {
          thumbnail: {
            label: {
              url: null,
            },
          },
        },
        delete_feature: {
          thumbnail: {
            label: {
              url: null,
            },
          },
        },
        instance: {
          title: null,
          thumbnail: {
            label: {
              url: null,
            },
          },
        },
        is_project_type: {
          html_name: null,
        },
        description: {
          id_for_label: null,
        },
        moderation: {
          html_name: null,
        },
        title: {
          id_for_label: null,
          help_text: null,
          label: null,
          field: {
            max_length: null,
          },
        },
        thumbnail: {
          label: {
            url: null,
          },
        },
      },
      errors: null,
      x: null,
    };
  },
};
</script>