{% extends "base.html" %}
{# Copyright The IETF Trust 2015, All Rights Reserved #}
{% load origin %}
{% load static %}
{% load bootstrap3 %}
{% load misc_filters %}

{% block pagehead %}
  {{ all_forms|merge_media:'css' }}
  <link rel="stylesheet" href="{% static 'bootstrap-datepicker/css/bootstrap-datepicker3.min.css' %}">
{% endblock %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
  {% origin %}
  <h1>{{ title }}</h1>

  <noscript>This page depends on Javascript being enabled to work properly.</noscript>

  <p>Links:
    <a href="{{ group.about_url }}">{{ group.acronym }} {{ group.type.name }}</a>
    {% if group.charter %}
      - <a href="{% url "ietf.doc.views_doc.document_main" name=group.charter.canonical_name %}">{{ group.charter.canonical_name }}</a>
    {% endif %}
  </p>

  <div class="container-fluid">
    {% if can_change_uses_milestone_dates %}
      <div class="col-sm-12">
        <form method="post" id="switch-date-use-form">{% csrf_token %}
          <button class="btn btn-default" type="submit" name="action" value="switch"{% if milestone_set == 'charter' and not group.charter.rev == '00-00' %} style="display:none;"{% endif %}>
            {% if group.uses_milestone_dates %}Stop{% else %}Start{% endif %} using milestone dates
          </button>
        </form>
      </div>
    {% endif %}


    <div class="col-sm-12">
      <p class="help-block">
        {% if forms %}Click a milestone to edit it.{% endif %}
        {% if forms and not group.uses_milestone_dates %}Drag and drop milestones to reorder them.{% endif %}

        {% if needs_review %}
          Note that as {{ group.type.name }} Chair you cannot edit descriptions of existing
          milestones and milestones you add are subject to review by the {{ reviewer }}.
        {% endif %}
      </p>

      {% if can_reset %}
        <p>
          You can <a href="{% url 'ietf.group.milestones.reset_charter_milestones' group_type=group.type_id acronym=group.acronym %}">reset
          this list</a> to the milestones currently in use for the {{ group.acronym }} {{ group.type.name }}.
        </p>
      {% endif %}

      {% if form_errors %}
        <p class="alert alert-danger">There were errors, see below.</p>
      {% endif %}
    </div>
  </div>

  <form method="post" id="milestones-form">{% csrf_token %}
    <div id="dragdropcontainer" class="container-fluid">

        {% for form in forms %}
        <div class="row milestonerow draggable">
          <span class="milestone{% if form.delete.data %} delete{% endif %}">
            <span class="due handle col-sm-1">
              {% if form.milestone.resolved %}
                <span class="label label-success">{{ form.milestone.resolved }}</span>
              {% else %}
                {% if group.uses_milestone_dates %}{{ form.milestone.due|date:"M Y" }}{% endif %}
              {% endif %}
            </span>
            <span class="col-sm-11">
              <span>{{ form.milestone.desc }}
                {% if form.needs_review %}<span title="This milestone is not active yet, awaiting {{ reviewer }} acceptance" class="label label-warning">Awaiting accept</span>{% endif %}
                {% if form.changed %}<span class="label label-info">Changed</span>{% endif %}
                {% if form.delete.data %}<span class="label label-danger">Deleted</span>{% endif %}
              </span>
              
              {% for d in form.docs_names %}
                <div class="doc">{{ d }}</div>
              {% endfor %}
            </span>
          </span>

          <span class="edit-milestone{% if form.changed %} changed{% endif %}">
            <span colspan="2">{% include "group/milestone_form.html" %}</span>
          </span>
        </div>
        {% endfor %}
    </div>
    <div class="row extrabuttoncontainer">
      <div class="col-sm-1"></div>
      <div class="col-sm-11"><button type="button" class="btn btn-default add-milestone">Add extra {% if milestone_set == "chartering" %}charter{% endif%} milestone {% if needs_review %}for {{ reviewer }} review{% endif %}</button></div>
    </div>
    <div id="extratemplatecontainer">
      <div class="row extratemplate">
        <div class="edit-milestone template"><div colspan="2">{% include "group/milestone_form.html" with form=empty_form %}</div></div>
      </div>
    </div>

    {% buttons %}
      <a class="btn btn-default pull-right" href="{% if milestone_set == "charter" %}{% url "ietf.doc.views_doc.document_main" name=group.charter.canonical_name %}{% else %}{{ group.about_url }}{% endif %}">Cancel</a>

      <button style="display:none" class="btn btn-primary" type="submit" data-labelsave="Save" data-labelreview="Review changes">Save</button>
      <input type="hidden" name="action" value="save">
    {% endbuttons %}

  </form>

  {% if group.uses_milestone_dates %}
    <div id="uses_milestone_dates"></div>
  {% endif %}

{% endblock %}

{% block js %}
  {{ all_forms|merge_media:'js' }}
  <script src="{% static 'bootstrap-datepicker/js/bootstrap-datepicker.min.js' %}"></script>
  {% if not group.uses_milestone_dates %}
  <script src="{% static 'Sortable/Sortable.min.js' %}"></script>
  {% endif %}
  <script src="{% static 'ietf/js/edit-milestones.js' %}"></script>
{% endblock %}