{% extends "base.html" %}

{% from "components/icon.html" import Icon %}
{% from "components/modal.html" import Modal %}
{% from "components/selector.html" import Selector %}
{% from "components/options_input.html" import OptionsInput %}
{% from "components/confirmation_button.html" import ConfirmationButton %}

{% block content %}

{% include "fragments/flash.html" %}

<form method="POST" action="{{ url_for('portfolios.update_member', portfolio_id=portfolio.id, member_id=member.user_id) }}" autocomplete="false">
  {{ form.csrf_token }}

  <div class='panel member-card'>
    <div class='member-card__header'>
      <h1 class='member-card__heading'>{{ member.user.full_name }}</h1>

        <div class="usa-input member-card__input">
          {{ Selector(form.portfolio_role) }}
        </div>

    </div>
    <div class='member-card__details'>
      <dl>
        <div>
          <dt>DOD ID:</dt>
          <dd>{{ member.user.dod_id }}</dd>
        </div>
        <div>
          <dt>Email:</dt>
          <dd>{{ member.user.email }}</dd>
        </div>
      </dl>
      {% if editable %}
        <a href='{{ url_for("users.user") }}' class='icon-link'>edit account details</a>
      {% endif %}
      <div>
      {% if member.latest_invitation.is_revokable %}
        {{ ConfirmationButton(
              "Revoke Invitation",
              url_for("portfolios.revoke_invitation", portfolio_id=portfolio.id, token=member.latest_invitation.token),
           ) }}
      {% endif %}
      {% if member.can_resend_invitation %}
        {{ ConfirmationButton (
              "Resend Invitation",
              url_for("portfolios.resend_invitation", portfolio_id=portfolio.id, token=member.latest_invitation.token),
              confirm_msg="Are you sure? This will send an email to invite the user to join this portfolio."
        )}}
      {% endif %}
      {% if can_revoke_access %}
        {{ ConfirmationButton (
              "Remove Portfolio Access",
              url_for("portfolios.revoke_access", portfolio_id=portfolio.id, member_id=member.id),
              confirm_msg="Are you sure? This will remove this user from the portfolio.",
        )}}
      {% endif %}
      </div>
    </div>
  </div>

  <div class="panel">
    <div class="panel__heading panel__heading--tight">
      <h2 class="h3">Manage Access <div class="subtitle">Grant access to an environment</div></h2>
    </div>
  </div>

  <div class='search-bar'>
    <div class='usa-input search-input'>
      <label for='application-search'>Search by application name</label>
      <input type='search' id='application-search' name='application-search' placeholder="Search by application name"/>
      <button type="submit">
        <span class="hide">Search</span>
      </button>
    </div>
  </div>

  {% for application in applications %}
  {% set revoke_modal_name = (application.id|string) + 'RevokeModal' %}
  <edit-application-roles inline-template name="{{ application.name }}" id="{{ application.id }}">
    <div is='toggler' default-visible class='block-list application-list-item'>
      <template slot-scope='props'>
        <header class='block-list__header'>
        <button v-on:click='props.toggle' class='icon-link icon-link--large icon-link--default spend-table__application__toggler'>
            <template v-if='props.isVisible'>{{ Icon('caret_down') }}</template>
            <template v-else>{{ Icon('caret_right') }}</template>
            <h3 class="block-list__title">{{ application.name }}</h3>
          </button>
          <span><a v-on:click="openModal('{{ revoke_modal_name }}')" class="icon-link icon-link--danger">revoke all access</a></span>
        </header>
          {% call Modal(name=revoke_modal_name, dismissable=False) %}
            <div>
              <h1>Revoke Access</h1>
              <p>
                Confirming will revoke access for {{ member.user.full_name }} to any environments associated with {{ application.name }}.
              </p>
              <div class='action-group'>
                <a v-on:click="doRevoke(); closeModal('{{ revoke_modal_name }}')" class='action-group__action usa-button'>Confirm</a>
                <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('{{ revoke_modal_name }}'); cancel();">Cancel</a>
              </div>
            </div>
          {% endcall %}
        <ul v-show='props.isVisible'>
          {% for env in application.environments %}

            {% set role = EnvironmentRoles.get(member.user_id, env.id).role %}
            {% set env_modal_name = (env.id|string) + 'RolesModal' %}

          <li class='block-list__item'>
            <edit-environment-role inline-template initial-data='{{ role or "" }}' v-bind:choices='{{ choices | tojson }}' v-bind:application-id="'{{ application.id }}'">
            <div class='application-list-item__environment'>
              <span class='application-list-item__environment__link'>
                {{ env.name }}
              </span>

              <div class='application-list-item__environment__actions'>
                <span v-bind:class="label_class" v-html:on=displayName></span>
                <button v-on:click="openModal('{{env_modal_name}}')" type="button" class="icon-link">set role</button>
                {% call Modal(name=env_modal_name, dismissable=False) %}
                    <div class='block-list'>
                      <div class='block-list__header'>
                        <div>
                        {% if env_role_modal_description %}
                          <h1>{{ env_role_modal_description.header }}</h1>
                          <p>{{ env_role_modal_description.body | safe }}</p>
                        {% endif %}
                        </div>
                      </div>
                      <ul>
                        {% for choice in choices %}
                        <li class='block-list__item block-list__item--selectable'>
                            <input
                              name='radio_input_{{ env.id }}'
                              v-on:change.prevent='change'
                              type='radio'
                              id="env_{{ env.id }}_{{ choice[0] }}"
                              value='{{ choice[0] }}'
                              :checked="new_role === '{{ choice[0]}}'"
                            />
                            <label for="env_{{ env.id }}_{{ choice[0] }}">
                              {% if choice[1].description %}
                                <dl>
                                  <dt>{{ choice[1].name }}</dt>
                                  <dd>{{ choice[1].description }}</dd>
                                </dl>
                              {% else %}
                                {{ choice[1].name }}
                              {% endif %}
                            </label>
                        </li>
                        {% endfor %}
                      </ul>
                      <input type='hidden' name='env_{{ env.id }}' v-bind:value='newRole'/>
                      <div class='block-list__footer'>
                        <div class='action-group'>
                          <a v-on:click="closeModal('{{env_modal_name}}')" class='action-group__action usa-button'>Select Access Role</a>
                          <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('{{env_modal_name}}'); cancel();" value="{{ value if value == role else role }}" >Cancel</a>
                        </div>
                      </div>
                    </div>
                {% endcall %}
              </div>
            </div>
            </edit-environment-role>
          </li>

          {% endfor %}
        </ul>
      </template>
    </div>
  </edit-application-roles>
  {% endfor %}

  <div class='action-group'>
    <button class='action-group__action usa-button usa-button-big'>
      {% if is_new_member %}Create{% else %}Save{% endif %}
    </button>
    <a href='{{ url_for("portfolios.portfolio_members", portfolio_id=portfolio.id) }}' class='action-group__action icon-link'>
      {{ Icon('x') }}
      <span>Cancel</span>
    </a>
  </div>

  </form>



{% endblock %}