<template>
  <div v-if="project">
    <div class="row">
      <div class="four wide middle aligned column">
        <img class="ui small spaced image" src="project.thumbnail" />
        <!-- // todo : GET PROJECT DATA -->
        <div class="ui hidden divider"></div>
        <div class="ui basic teal label" data-tooltip="Membres">
          <i class="user icon"></i>{{ project.nb_contributors }}
        </div>
        <div class="ui basic teal label" data-tooltip="Signalements">
          <i class="map marker icon"></i>{{ project.nb_published_features }}
        </div>
        <div class="ui basic teal label" data-tooltip="Commentaires">
          <i class="comment icon"></i
          >{{ project.nb_published_features_comments }}
        </div>
      </div>
      <div class="ten wide column">
        <h1 class="ui header">
          <div class="content">
            {{ project.title }}
            <div class="ui icon right floated compact buttons">
              <!-- {% if permissions|lookup:'can_view_project' %} -->
              <a
                id="subscribe-button"
                class="ui button button-hover-green"
                data-tooltip="S'abonner au projet"
                data-position="top center"
                data-variation="mini"
              >
                <i class="inverted grey envelope icon"></i>
              </a>
              <!-- {% endif %} {% if project and
              permissions|lookup:'can_update_project' %} -->
              <a
                href="{% url 'geocontrib:project_update' slug=project.slug %}"
                class="ui button button-hover-orange"
                data-tooltip="Modifier le projet"
                data-position="top center"
                data-variation="mini"
              >
                <i class="inverted grey pencil alternate icon"></i>
              </a>
              <!-- {% endif %} -->
            </div>
            <div class="ui hidden divider"></div>
            <div class="sub header">
              {{ project.description }}
              <!-- {{ project.description | linebreaks }} -->
            </div>
          </div>
        </h1>
      </div>
    </div>

    <div class="row">
      <div class="seven wide column">
        <h3 class="ui header">Types de signalements</h3>
        <div class="ui middle aligned divided list">
          <!-- {% for type in feature_types %} -->
          <div class="item">
            <div class="middle aligned content">
              <a
                href="{% url 'geocontrib:feature_type_detail' slug=project.slug feature_type_slug=type.slug %}"
              >
                <!-- {% if type.geom_type == 'point' %} -->
                <img
                  class="list-image-type"
                  src="{% static 'geocontrib/img/marker.png' %}"
                />
                <!-- {% elif type.geom_type == 'linestring' %} -->
                <img
                  class="list-image-type"
                  src="{% static 'geocontrib/img/line.png' %}"
                />
                <!-- {% elif type.geom_type == 'polygon' %} -->
                <img
                  class="list-image-type"
                  src="{% static 'geocontrib/img/polygon.png' %}"
                />
                <!-- {% endif %} -->
                <!-- {{ type.title }} -->
              </a>
              <!-- {% if project and feature_types and
              permissions|lookup:'can_create_feature' %} -->
              <a
                class="
                  ui
                  compact
                  small
                  icon
                  right
                  floated
                  button button-hover-green
                "
                data-tooltip="Ajouter un signalement"
                data-position="left center"
                data-variation="mini"
                href="{% url 'geocontrib:feature_create' slug=project.slug feature_type_slug=type.slug %}"
                ><!-- // todo : adapt -->
                <i class="ui plus icon"></i>
              </a>
              <a
                class="
                  ui
                  compact
                  small
                  icon
                  right
                  floated
                  button button-hover-green
                "
                data-tooltip="Dupliquer un type de signalement"
                data-position="left center"
                data-variation="mini"
                href="{% url 'geocontrib:feature_type_create' slug=project.slug %}?create_from=type.slug"
                ><!-- // todo : adapt -->
                <i class="inverted grey copy alternate icon"></i>
              </a>
              <!-- {% endif %} {% if project and feature_types and
              permissions|lookup:'can_create_feature' and type.is_editable %} -->
              <a
                class="
                  ui
                  compact
                  small
                  icon
                  right
                  floated
                  button button-hover-green
                "
                data-tooltip="Éditer le type de signalement"
                data-position="left center"
                data-variation="mini"
                href="{% url 'geocontrib:feature_type_update' slug=project.slug feature_type_slug=type.slug %}"
              >
                <i class="inverted grey pencil alternate icon"></i>
              </a>
              <!-- {% endif %} -->
            </div>
          </div>
          <!-- {% empty %} -->
          <div>
            <i> Le projet ne contient pas encore de type de signalements. </i>
          </div>
          <!-- {% endfor %} -->
        </div>
        <!-- {% if project and permissions|lookup:'can_update_project' %} -->
        <a
          class="ui compact basic button button-hover-green"
          href="{% url 'geocontrib:feature_type_create' slug=project.slug %}"
        >
          <i class="ui plus icon"></i>Créer un nouveau type de signalement
        </a>
        <!-- {% endif %} -->
      </div>
      <div class="seven wide column">
        <a href="{% url 'geocontrib:feature_list' slug=project.slug %}">
          <div id="map"></div>
        </a>
      </div>
    </div>

    <div class="row">
      <div class="fourteen wide column">
        <div class="ui two stackable cards">
          <div class="red card">
            <div class="content">
              <div class="center aligned header">Derniers signalements</div>
              <div class="center aligned description">
                <div class="ui relaxed list">
                  <!-- {% for item in last_features %} -->
                  <div class="item">
                    <div class="content">
                      <div>
                        <a
                          href="{% url 'geocontrib:feature_detail' slug=project.slug feature_type_slug=item.feature_type.slug feature_id=item.feature_id  %}"
                          ><!-- {{ item.title }} --></a
                        >
                      </div>
                      <div class="description">
                        <i
                          ><!-- [{{ item.created_on|date:"d/m/Y" }}{% if
                          user.is_authenticated %}, par
                          {{ item.display_creator }} {% endif %}
                          ] --></i
                        >
                      </div>
                    </div>
                  </div>
                  <!-- {% empty %} -->
                  <i>Aucun signalement pour le moment.</i>
                  <!-- {% endfor %} -->
                </div>
              </div>
            </div>
          </div>
          <div class="orange card">
            <div class="content">
              <div class="center aligned header">Derniers commentaires</div>
              <div class="center aligned description">
                <div class="ui relaxed list">
                  <!-- {% for item in last_comments %} -->
                  <div class="item">
                    <div class="content">
                      <div>
                        <!-- // todo : adapt -->
                        <a href="item.related_feature.feature_url"
                          >"<!-- {{ item.comment }} -->"</a
                        >
                      </div>
                      <div class="description">
                        <i
                          ><!-- [ {{ item.created_on }}{% if user.is_authenticated
                          %}, par {{ item.display_author }}{% endif %} ] --></i
                        >
                      </div>
                    </div>
                  </div>
                  <!-- {% empty %} -->
                  <i>Aucun commentaire pour le moment.</i>
                  <!-- {% endfor %} -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="fourteen wide column">
        <div class="ui grey segment">
          <h3 class="ui header">Paramètres du projet</h3>
          <div class="ui five stackable cards">
            <div class="card">
              <div class="center aligned content">
                <h4 class="ui center aligned icon header">
                  <i class="disabled grey archive icon"></i>
                  <div class="content">Délai avant archivage automatique</div>
                </h4>
              </div>
              <div class="center aligned extra content">
                <!-- {{ project.archive_feature|default_if_none:"0" }} jours -->
                {{ project.archive_feature }} jours
              </div>
            </div>
            <div class="card">
              <div class="content">
                <h4 class="ui center aligned icon header">
                  <i class="disabled grey trash alternate icon"></i>
                  <div class="content">Délai avant suppression automatique</div>
                </h4>
              </div>
              <div class="center aligned extra content">
                <!-- {{ project.delete_feature|default_if_none:"0" }} jours -->
                {{ project.delete_feature }} jours
              </div>
            </div>
            <div class="card">
              <div class="content">
                <h4 class="ui center aligned icon header">
                  <i class="disabled grey eye icon"></i>
                  <div class="content">Visibilité des signalements publiés</div>
                </h4>
              </div>
              <div class="center aligned extra content">
                {{ project.access_level_pub_feature }}
              </div>
            </div>
            <div class="card">
              <div class="content">
                <h4 class="ui center aligned icon header">
                  <i class="disabled grey eye icon"></i>
                  <div class="content">
                    Visibilité des signalements archivés
                  </div>
                </h4>
              </div>
              <div class="center aligned extra content">
                {{ project.access_level_arch_feature }}
              </div>
            </div>
            <div class="card">
              <div class="content">
                <h4 class="ui center aligned icon header">
                  <i class="disabled grey cogs icon"></i>
                  <div class="content">Modération</div>
                </h4>
              </div>
              <div class="center aligned extra content">
                {{ project.moderation ? "Oui" : "Non" }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- {% else %} -->
    <i class="icon exclamation triangle"></i>
    <span
      >Vous ne disposez pas des droits nécessaires pour consulter ce
      projet.</span
    >
    <!-- {% endif %} -->

    <div class="ui mini modal subscription">
      <i class="close icon"></i>
      <div class="ui icon header">
        <i class="envelope icon"></i>
        Notifications du projet
      </div>
      <div class="content">
        <!-- {% if is_suscriber %} -->
        <form
          action="{% url 'geocontrib:subscription' slug=project.slug action='annuler' %}"
          method="GET"
        >
          <button type="submit" class="ui red compact fluid button">
            Se désabonner de ce projet
          </button>
        </form>
        <!-- {% else %} -->
        <form
          action="{% url 'geocontrib:subscription' slug=project.slug action='ajouter' %}"
          method="GET"
        >
          <button type="submit" class="ui green compact fluid button">
            S'abonner à ce projet
          </button>
        </form>
        <!-- {% endif %} -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Project_details",
  data() {
    return {
      slug: this.$route.params.slug,
    };
  },
  computed: {
    project() {
      return this.$store.state.projects.find(
        (project) => project.slug === this.slug
      );
    },
  },
  mounted() {
    console.log(this.$store.state);
  },
};
</script>