Populate modal with user roles

templates/member_edit.html

@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 
 {% from "components/icon.html" import Icon %}
+{% from "components/modal.html" import Modal %}
 
 {% block content %}
 
@@ -52,6 +53,51 @@
   </div>
 </form>
 
+{% call Modal(name='styleguideModal', dismissable=True) %}
+  <div class="block-list">
+
+    <header class="block-list__header">
+      <h3>New Request</h3>
+      <div class="subtitle">Add a user to an environment</div>
+
+    </header>
+
+
+    <dl>
+      <div class='block-list__item'>
+        <dt>CCPO</dt>
+        <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dicta voluptate vitae quasi, cumque rem dolores, quae quas cum in recusandae? Libero deleniti minus ab accusantium vel necessitatibus placeat, rerum?</dd>
+      </div>
+      <div class='block-list__item'>
+        <dt>Security</dt>
+        <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat vel ea, eaque, odio sint explicabo officia, debitis dolore, et repudiandae possimus deserunt eveniet laborum. Sunt blanditiis deleniti minus. Et, mollitia.</dd>
+      </div>
+      <div class='block-list__item'>
+        <dt>Audit</dt>
+        <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem itaque reprehenderit dolorum nobis voluptatibus quae, facilis voluptatum necessitatibus alias laboriosam, esse blanditiis culpa possimus tempore consectetur recusandae. Nihil, vel, dolorem!</dd>
+      </div>
+      <div class='block-list__item'>
+        <dt>Application Developer</dt>
+        <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea esse ab consequuntur aliquam. Porro ea mollitia sapiente blanditiis quaerat quam beatae vitae adipisci quisquam dolore reiciendis tenetur, eius nemo quibusdam!</dd>
+      </div>
+      <div class='block-list__item'>
+        <dt>Dev Ops</dt>
+        <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore incidunt obcaecati, quidem ullam sint iusto. Natus ex distinctio eveniet cumque laudantium veritatis nemo asperiores, esse hic quis perspiciatis, quia impedit.</dd>
+      </div>
+      <div class='block-list__item'>
+        <dt>Billing</dt>
+        <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem delectus at, voluptatibus dolores, nobis temporibus. Ipsum dignissimos corrupti qui nisi et alias totam commodi maiores hic possimus ipsam error, ullam.</dd>
+      </div>
+    </dl>
+
+  </div>
+
+  <div class='action-group'>
+    <a v-on:click="closeModal('styleguideModal')" class='action-group__action usa-button'>Add Access</a>
+    <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('styleguideModal')">No Access</a>
+  </div>
+{% endcall %}
+
 <div is='toggler' default-visible class='block-list project-list-item'>
   <template slot-scope='{ isVisible, toggle }'>
     <header class='block-list__header'>
@@ -68,7 +114,7 @@
           Development
         </span>
         <div class='project-list-item__environment__actions'>
-          <span class="label">no access </span><a href="#" class="icon-link">set role</a>
+          <span class="label">no access </span><button v-on:click="openModal('styleguideModal')" type="button" class="icon-link">set role</button>
         </div>
       </li>
       <li class='block-list__item project-list-item__environment'>
@@ -76,7 +122,7 @@
           Sandbox
         </span>
         <div class='project-list-item__environment__actions'>
-          <span class="label">no access</span><a href="#" class="icon-link">set role</a>
+          <span class="label">no access</span><button v-on:click="openModal('styleguideModal')" type="button" class="icon-link">set role</button>
         </div>
       </li>
       <li class='block-list__item project-list-item__environment'>
@@ -84,7 +130,7 @@
           Production
         </span>
         <div class='project-list-item__environment__actions'>
-          <span class="label label--success">Billing</span><a href="#" class="icon-link">set role</a>
+          <span class="label label--success">Billing</span><button v-on:click="openModal('styleguideModal')" type="button" class="icon-link">set role</button>
         </div>
       </li>
     </ul>
@@ -107,7 +153,7 @@
           Development
         </span>
         <div class='project-list-item__environment__actions'>
-          <span class="label">no access </span><a href="#" class="icon-link">set role</a>
+          <span class="label">no access </span><button v-on:click="openModal('styleguideModal')" type="button" class="icon-link">set role</button>
         </div>
       </li>
       <li class='block-list__item project-list-item__environment'>
@@ -115,7 +161,7 @@
           Sandbox
         </span>
         <div class='project-list-item__environment__actions'>
-          <span class="label">no access</span><a href="#" class="icon-link">set role</a>
+          <span class="label">no access</span><button v-on:click="openModal('styleguideModal')" type="button" class="icon-link">set role</button>
         </div>
       </li>
       <li class='block-list__item project-list-item__environment'>
@@ -123,7 +169,7 @@
           Production
         </span>
         <div class='project-list-item__environment__actions'>
-          <span class="label">no access</span><a href="#" class="icon-link">set role</a>
+          <span class="label">no access</span><button v-on:click="openModal('styleguideModal')" type="button" class="icon-link">set role</button>
         </div>
       </li>
     </ul>