From 1511b5deca1abca41a39b822ccc2eeabb0837c47 Mon Sep 17 00:00:00 2001
From: igorkorenfeld <igor.korenfeld@gsa.gov>
Date: Thu, 18 May 2023 19:14:37 -0400
Subject: [PATCH] Upate summary item for user lists and edit button option

---
 .../templates/includes/summary_item.html      | 120 +++++++++++-------
 1 file changed, 74 insertions(+), 46 deletions(-)

diff --git a/src/registrar/templates/includes/summary_item.html b/src/registrar/templates/includes/summary_item.html
index c902f1980..170ec67cb 100644
--- a/src/registrar/templates/includes/summary_item.html
+++ b/src/registrar/templates/includes/summary_item.html
@@ -1,49 +1,77 @@
+{% load static url_helpers %}
+
 <section class="summary-item margin-top-3">
   <hr class="" />
-  <p class="summary-item__title 
-            text-primary-dark text-semibold
-            margin-top-0 margin-bottom-05"
-  > 
-  {{ title }} 
-  </p>
-  {% if address %}
-    {% include "includes/organization_address.html" with organization=value %}
-  {% elif contact %}
-    {% if list %}
-      {% if value|length == 1 %}
-        {% include "includes/contact.html" with contact=value|first %}
-      {% else %}
-        <ul class="usa-list usa-list--unstyled margin-top-0">
-          {% for item in value %}
-          <li>
-            <p class="text-semibold margin-top-1 margin-bottom-0">
-              Conatct {{forloop.counter}}
-            </p>
-            {% include "includes/contact.html" with contact=item %}</li>
-          {% empty %}
-           <li>None</li>
-          {% endfor %}</ul></p>
-        </ul>
-      {% endif %}
-    {% else %}
-      {% include "includes/contact.html" with contact=value %}
-    {% endif %}
-  {% elif list %}
-    {% if value|length == 1 %}
-      <p class="margin-top-0">{{ value | first }} </p>
-    {% else %}
-      <ul class="usa-list margin-top-0">
-        {% for item in value %}
-         <li>{{ item }}</li>
-        {% empty %}
-         <li>None</li>
-        {% endfor %}</ul></p>
-      </ul>
-    {% endif %}
-  {% else %}
-  <p class="margin-top-0">
-    {{ value }}
-  </p>
-  {% endif %}
-  
+  <div class="display-flex flex-justify">
+    <div>
+      <p class="summary-item__title 
+                text-primary-dark text-semibold
+                margin-top-0 margin-bottom-05"
+      > 
+      {{ title }} 
+      </p>
+      {% if address %}
+        {% include "includes/organization_address.html" with organization=value %}
 
+      {% elif contact %}
+        {% if list %}
+          {% if value|length == 1 %}
+            {% include "includes/contact.html" with contact=value|first %}
+          {% else %}
+            <ul class="usa-list usa-list--unstyled margin-top-0">
+              {% for item in value %}
+              <li>
+                <p class="text-semibold margin-top-1 margin-bottom-0">
+                  Conatct {{forloop.counter}}
+                </p>
+                {% include "includes/contact.html" with contact=item %}</li>
+              {% empty %}
+               <li>None</li>
+              {% endfor %}</ul></p>
+            </ul>
+          {% endif %}
+        {% else %}
+          {% include "includes/contact.html" with contact=value %}
+        {% endif %}
+
+      {% elif list %}
+        {% if value|length == 1 %}
+          <p class="margin-top-0">{{ value | first }} </p>
+        {% else %}
+          <ul class="usa-list margin-top-0">
+            {% for item in value %}
+             <li>{{ item }}</li>
+            {% empty %}
+             <li>None</li>
+            {% endfor %}</ul></p>
+          </ul>
+        {% endif %}
+
+      {% elif users %}
+        {% if value|length == 1 %}
+            <p class="margin-top-0">{{ user.email }} <span class="padding-left-2px text-base"> ({{ value.first.role }}) </span></p>
+        {% else %}
+          <ul class="usa-list usa-list--unstyled margin-top-0">
+          {% for item in value %}
+            <li>{{ user.email }} <span class="padding-left-2px text-base"> ({{ item.role }}) </span></li>
+          {% endfor %} 
+        {% endif %}
+
+      {% else %}
+      <p class="margin-top-0">
+        {{ value }}
+      </p>
+      {% endif %}
+    </div>
+
+    {% if edit_link %}
+    <a
+        aria-describedby="summary-item__title"
+        href="{{ edit_link }}"
+    >
+      Edit<span class="sr-only"> {{ title }}</span>
+    </a>
+    {% endif %}
+
+  </div> 
+</section>