{% extends "../base.html" %}

{% block page_title %}Switch Active Role{% endblock %}

{% block content %}
<div class="clearfix"></div>

<div class="row">
  <div class="col-md-8 col-sm-12">
    <div class="x_panel">
      <div class="x_title">
        <h2><i class="fa fa-user-shield"></i> Switch Active Role</h2>
        <div class="clearfix"></div>
      </div>
      <div class="x_content">
        <p class="text-muted">
          Change which assigned role is active for this session.
          This affects dashboard and menu visibility only.
        </p>

        {% if form.errors %}
        <div class="alert alert-danger" role="alert">
          Invalid role selection. Please choose one of your assigned roles.
        </div>
        {% endif %}

        <form method="post" action="{% url 'switch_role' %}">
          {% csrf_token %}
          <div class="form-group">
            <label for="role">Assigned Roles</label>
            <select id="role" name="role" class="form-control" required>
              {% for role in roles %}
              <option value="{{ role.id }}" {% if role.name == active_role_name %}selected{% endif %}>
                {{ role.name }}
              </option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group" style="margin-bottom: 0;">
            <button type="submit" class="btn btn-primary">
              <i class="fa fa-sync"></i> Apply Role
            </button>
            <a href="{% url 'index_page' %}" class="btn btn-default">
              Back to Dashboard
            </a>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="col-md-4 col-sm-12">
    <div class="x_panel">
      <div class="x_title">
        <h2><i class="fa fa-info-circle"></i> Role Status</h2>
        <div class="clearfix"></div>
      </div>
      <div class="x_content">
        <p class="text-muted" style="margin-bottom: 6px;">Current active role</p>
        <h4 style="margin-top: 0;">
          <span class="label label-success">{{ active_role_name|default:staff_primary_role }}</span>
        </h4>
        <hr>
        <p class="text-muted" style="margin-bottom: 8px;">All assigned roles</p>
        {% for role in roles %}
        <span class="label {% if role.name == active_role_name %}label-primary{% else %}label-default{% endif %}" style="display: inline-block; margin: 0 4px 6px 0;">
          {{ role.name }}
        </span>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}