{% 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 %}
                  <em>Invitation Pending</em>
                {% 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>
        {% if invite_link %}
          <div class="form-actions">
            <div class="control-group">
              <label>{% trans "Invite Link" %}</label>
              <div class="controls">
                <code class="auto-select form-control" style="overflow: auto">{{ invite_link }}</code>
              </div>
              <p class="help-block">This unique invite link may only be used by this member.</p>
            </div>
            <div class="align-right">
              <button type="submit" name="op" value="regenerate" class="btn btn-default">{% trans "Generate New Invite" %}</button>
              <button type="submit" name="op" value="reinvite" class="btn btn-default">{% trans "Resend Invite" %}</button>
            </div>
          </div>
        {% endif %}
      </div>
    </div>

    {% include "sentry/partial/members/_roles.html" %}
    {% include "sentry/partial/members/_teams.html" %}

    <div class="form-actions">
      <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 %}
