{% extends "wginfo/wg_base.html" %}

{% block wg_titledetail %}Manage Workflow{% endblock %}

{% block pagehead %}
{{ block.super }}
<script type="text/javascript" src="/js/lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/yui/yui-20100305.js"></script>
<script type="text/javascript" src="/js/base.js"></script>
{% endblock pagehead %}

{% block morecss %}
{{ block.super }}
.state-table .inactive,
.tag-table .inactive {
  font-style: italic;
  color: #666;
}
.state-table .state {
  padding-right: 0.6em;
}
.set-next-states {
  margin-top: 1em;
}
.set-next-states label {
  display: block;
  cursor: pointer;
}
.set-next-states label input {
  vertical-align: middle;
}
.set-state input, .set-tag input {
  width: 6em;
}
.toggled {
  display: none;
}
.toggler {
  color: #000;
  text-decoration: none;
  padding: 0px 3px;
  display: inline-block;
  margin-left: 0.5em;
  font-size: 15px;
  font-weight: bold;
}
.inactive .toggler {
  color: #666;
}
.toggler:hover {
  background-color: #999;
  color: #fff;
}
{% endblock %}

{% block wg_content %}
<div class="wg-workflow-management">
<h2>Edit workflow</h2>

<p>Below you can customize the draft states and tags used in the {{ wg.acronym }} WG. Note that some states are mandatory for WG operation and cannot be deactivated.</p>

<p>You can see the default Working Group I-D State Diagram in <a href="http://tools.ietf.org/html/rfc6174#section-4.1">Section 4.1 of RFC6174</a>.</p>

<h3>States</h3>

<table class="ietf-table state-table">
  <tr> 
    <th>Turn on/off</th>
    <th style="width:30em">State</th>
    <th style="width:26em">Next states</th>
  </tr>
  {% for state in states %}
  <tr class="{% cycle "oddrow" "evenrow" %}{% if not state.used %} inactive{% endif %}" style="vertical-align: top;">
    <td>
      {% if state.mandatory %}
      (mandatory)
      {% else %}
      <form class="set-state" method="post" action="">
      {% if state.used %}
        <input type="hidden" name="state" value="{{ state.pk }}" />
        <input type="hidden" name="active" value="0" />
        <input type="submit" title="Click to deactive this state" value="Deactivate" />
      {% else %}
        <input type="hidden" name="state" value="{{ state.pk }}" />
        <input type="hidden" name="active" value="1" />
        <input type="submit" title="Click to active this state" value="Activate" />
      {% endif %}
        <input type="hidden" name="action" value="setstateactive" />
      </form>
      {% endif %}
    </td>
    <td>
      <div>
        <span>{{ state.name }} {% if not state.used %} (not used in {{ wg.acronym }}){% endif %}</span>
        <a class="toggler" title="Click to show description of state" href="">+</a>
      </div>
      <div class="toggled">{{ state.desc|safe|linebreaks }}</div>
    </td>
    <td>
      <div>
      {% if state.used_next_states %}
      {% for n in state.used_next_states %}<span class="state">{{ n.name }}</span>{% if not forloop.last %} {% endif %}{% endfor %}
      {% else %}
      <i>None</i>
      {% endif %}
      <a class="toggler" title="Click to set next states for state"  href="">+</a>
      </div>
      <form class="toggled set-next-states" method="post" action="">
      Select the next states:
      {% for checked, default, s in state.next_states_checkboxes %}
      <label{% if not s.used %} class="inactive"{% endif %}><input type="checkbox" name="next_states" value="{{ s.pk }}"{% if checked %} checked="checked"{% endif %} />{{ s.name }}{% if default  %} (default){% endif %}</label>
      {% endfor %}
      <input type="hidden" name="state" value="{{ state.pk }}" />
      <input type="hidden" name="action" value="setnextstates" />
      <input class="submit" type="submit" value="Save" />
      </form>
    </td>
  </tr>
{% endfor %}
</table>

<h3>Tags</h3>

<table class="ietf-table tag-table">
  <tr> 
    <th>Turn on/off</th>
    <th>Tag</th>
  </tr>
  {% for tag in tags %}
  <tr class="{% cycle "oddrow" "evenrow" %}{% if not tag.used %} inactive{% endif %}" style="vertical-align: top;">
    <td>
      <form class="set-tag" method="post" action="">
      {% if tag.used %}
        <input type="hidden" name="tag" value="{{ tag.pk }}" />
        <input type="hidden" name="active" value="0" />
        <input type="submit" value="Deactivate" />
      {% else %}
        <input type="hidden" name="tag" value="{{ tag.pk }}" />
        <input type="hidden" name="active" value="1" />
        <input type="submit" value="Activate" />
      {% endif %}
        <input type="hidden" name="action" value="settagactive" />
      </form>
    </td>
    <td><span>{{ tag.name }} {% if not tag.used %} (not used in {{ wg.acronym }}){% endif %}</span></td>
  </tr>
  {% endfor %}
</table>

<script type="text/javascript">
//<![CDATA[
jQuery('.state-table .toggler').click(function(e) {
    e.preventDefault();
    var toggler = jQuery(this),
        toggled = toggler.parent().siblings(".toggled");
    if (toggled.is(":hidden")) {
        toggler.html("&ndash;");
        toggled.slideDown(300);
    }
    else {
        toggler.html("+");
        toggled.slideUp(300);
    }
});
//]]>
</script>

{% endblock %}
