{% extends "squad/user_settings/base.jinja2" %}

{% block styles %}
<link rel="stylesheet" href="{{static("select2.js/select2.css")}}">
{% endblock %}

{% block settings %}
<h1>Subscriptions</h1>

<p>Add subscription:</p>
<form method="POST">
  {{ csrf_input }}
  <div class="row">
    <div class="col-md-10">
      <select id="project_subscriptions" name="subscription" style="width: 100%;">
        {% for group in groups %}
        <optgroup label="{{ group.display_name }}">
          {% for project in group.projects.all() %}
          <option value="{{ project.id }}">{{ project.display_name }}</option>
        {% endfor %}
        </optgroup>
        {% endfor %}
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4" style="margin-top: 10px;">
      <select name="notification-strategy" class="form-control">
        {% for key, name in notification_strategies.items() %}
          <option value="{{ key }}">{{ name }}</option>
        {% endfor %}
      </select>
    </div>
  </div>
  <div style="margin-top: 10px;">
    <input type="submit" class="btn btn-primary" value="Submit"/>
  </div>
</form>

<p style="margin-top: 10px;">Your current subscriptions:</p>
{% if subscriptions %}
{% for sub in subscriptions %}
<pre>{{ sub.project.group.display_name }}/{{ sub.project.display_name }} ({{ sub.notification_strategy }})
  <a href="{{url('settings-subscription-remove', args=[sub.id])}}" class="btn btn-xs btn-danger btn-group-vertical pull-right" title="Remove subscription">
    <span class="glyphicon glyphicon-trash"></span>
  </a>
</pre>
{% endfor %}
{% else %}
    <div class="info">
      <p>
        You do not have an subscriptions yet.
      </p>
    </div>
{% endif %}

{% endblock %}

{% block javascript %}
<script type="text/javascript" src='{{static("select2.js/select2.min.js")}}'></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#project_subscriptions").select2();
  });
</script>
{% endblock %}
