{% extends "sentry/bases/modal.html" %}

{% load crispy_forms_tags %}
{% load i18n %}
{% load sentry_helpers %}

{% block title %}{% trans "Member Settings" %} | {{ block.super }}{% endblock %}

{% block main %}
  <div class="page-header">
    <a class="back-arrow" style="top: 0px;" href="{% url 'sentry-organization-members' organization.slug %}"><span class="icon-arrow-left"></span></a>
    <h2>
      {{ member.get_display_name }}
      <br><small>Member Settings</small>
    </h2>
  </div>

  <form class="form-stacked" action="" method="post">
    {% csrf_token %}

    {% if form.errors %}
      <div class="alert alert-block alert-error">{% trans "Please correct the errors below." %}</div>
    {% endif %}

    {{ form|as_crispy_errors }}

    <div class="box">
      <div class="box-header">
        <h3>{% trans "Basics" %}</h3>
      </div>

      <div class="box-content with-padding">
        <div class="row" style="margin-bottom:10px">
          <div class="col-md-6">
            <div class="control-group">
              <label>{% trans "Email" %}</label>
              <div class="controls">
                <a href="mailto:{{ member.get_email }}">{{ member.get_email }}</a>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="control-group">
              <label>{% trans "Status" %}</label>
              <div class="controls">
                {% if member.is_pending %}
                  Invited
                {% else %}
                  Active
                {% endif %}
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="control-group">
              <label>{% trans "Added" %}</label>
              <div class="controls">
                {{ member.date_added|date }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="box">
      <div class="box-header">
        <h3>{% trans "Role" %}</h3>
      </div>
      <div class="box-content with-padding">
        <ul class="radio-inputs">
          {% for role in role_list %}
            <li class="radio">
              <label>
                <input type="radio" name="role" value="{{ role.id }}"
                       {% if role.id == form.role.value %} checked{% endif %} />
                {{ role.name }}
                <div class="help-block">{{ role.desc|linebreaksbr }}</div>
              </label>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>

    <div class="box">
      <div class="box-header">
        <h3>{% trans "Teams" %}</h3>
      </div>
      <div class="box-content with-padding">
        <fieldset class="team-choices row">
          {% for team_id, team_name in form.teams.field.choices %}
            <div class="control-group col-md-4">
              <div class="controls">
                <label class="checkbox">
                  <input type="checkbox" name="teams" value="{{ team_id }}"
                         class="checkboxinput"{% if team_id in form.teams.value %} checked="checked"{% endif %}>
                    {{ team_name }}
                  </label>
              </div>
            </div>
          {% endfor %}
        </fieldset>
      </div>
    </div>

    <div class="form-actions">
      {% if organizationmember.is_pending %}
        <button type="submit" name="op" value="reinvite" class="btn btn-default">{% trans "Resend Invite" %}</button>
      {% endif %}
      <button type="submit" class="btn btn-primary">{% trans "Save Changes" %}</button>
    </div>
  </form>
{% endblock %}

{% block content_after %}
  <script>
  $(function(){
    var selector = $('.team-choices input[type=checkbox]');
    var selectedTeams = $('.team-choices input[type=checkbox]:checked').slice(0);
    $('#id_has_global_access').change(function(){
      var $this = $(this);
      var checked = $this.is(':checked');

      if (checked) {
        selectedTeams = $('.team-choices input[type=checkbox]:checked').slice(0);
        selector.prop('checked', true);
      } else {
        selector.prop('checked', false);
        $(selectedTeams).prop('checked', true);
        selectedTeams = [];
      }

      $('.team-choices').prop('disabled', checked);
    }).change();
  });
  </script>
{% endblock %}
