From a45bea4b2e8b84ee8d0015993a14ae2474fe8a9b Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Sat, 23 Jan 2021 11:14:43 +0100
Subject: [PATCH] group: add a pacman install example

---
 app/templates/group.html | 36 ++++++++++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/app/templates/group.html b/app/templates/group.html
index 4eeda4f..abb6449 100644
--- a/app/templates/group.html
+++ b/app/templates/group.html
@@ -5,16 +5,36 @@
 <div class="card mb-3">
   <div class="card-header">
     <h4 class="card-title">Group: <a href="{{ url_for('group', group_name=name) }}">{{ name }}</a></h4>
-    <h6 class="card-subtitle mb-2 text-muted">Packages that are part of the group</h6>
+    <h6 class="card-subtitle mb-2 text-muted">{{ packages|length }} packages</h6>
   </div>
   <div class="card-body">
-    <ul>
-      {% for p in packages %}
-        <li><a href="{{ package_url(p) }}">{{ package_name(p) }}</a></li>
-      {% else %}
-        Group doesn't exist
-      {% endfor %}
-    </ul>
+
+  {% if not packages %}
+    Group doesn't exist
+  {% else %}
+  <dl class="row">
+
+      <dt class="col-sm-3 text-sm-right">Installation:</dt>
+      <dd class="col-sm-9">
+        <div class="copyable rounded">
+          <div class="highlight">
+            <pre><code>pacman -S {{ name }}</code></pre>
+          </div>
+          <button class="btn" aria-label="Copy to clipboard" onclick="App.copyToClipboard(this);">📋</button>
+        </div>
+      </dd>
+
+      <dt class="col-sm-3 text-sm-right">Packages:</dt>
+      <dd class="col-sm-9">
+        <ul class="list-unstyled">
+        {% for p in packages %}
+          <li><a href="{{ package_url(p) }}">{{ package_name(p) }}</a></li>
+        {% endfor %}
+        </ul>
+      </dd>
+  </dl>
+  {% endif %}
+
   </div>
 </div>