group: add a pacman install example

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>