Merge ~deadlight/maas:user-prefs into ~deadlight/maas:vanilla

[Karl Williams]

 - Updated the user prefs page
 - Standardised differences in similar template fragments
 - Made minor changes to the page's JS to fit the new styling
 -

7f40f8d... by deadlight <email address hidden> on 2018-01-08

Update SSL deletion confirmation page and restructured SSH key dropdown as a list

[Anthony Dillon (ya-bo-ng)]

Few comments in the code.

review: Needs Fixing

8ae78d3... by deadlight <email address hidden> on 2018-01-08

Update SSH key tooltips and style with grid

[Karl Williams (deadlight)]

Ant: ready for re-review

[Anthony Dillon (ya-bo-ng)]

Small button replacements.

review: Needs Fixing

7cacef5... by deadlight <email address hidden> on 2018-01-08

Update save buttons

[Anthony Dillon (ya-bo-ng)]

Thanks +1

review: Approve

diff --git a/src/maasserver/static/js/prefs.js b/src/maasserver/static/js/prefs.js
index 082db27..9816655 100644
--- a/src/maasserver/static/js/prefs.js
+++ b/src/maasserver/static/js/prefs.js
@@ -27,7 +27,7 @@ TokenWidget.ATTRS = {
     nb_tokens: {
         readOnly: true,
         getter: function() {
-            return this.get('srcNode').all('.bundle').size();
+            return this.get('srcNode').all('.js-bundle').size();
         }
     }
 };
@@ -42,8 +42,7 @@ Y.extend(TokenWidget, Y.Widget, {
         this.create_link = Y.Node.create('<a />')
             .set('href', '#')
             .set('id','create_token')
-            .addClass('button--secondary')
-            .addClass('button--inline')
+            .addClass('p-button--neutral')
             .addClass('u-float--right')
             .set('text', "Generate MAAS key");
         this.status_node = Y.Node.create('<div />')
@@ -63,7 +62,7 @@ Y.extend(TokenWidget, Y.Widget, {
 
     bindDeleteRow: function(row) {
         var self = this;
-        var delete_link = row.one('a.delete-link');
+        var delete_link = row.one('a.js-delete-link');
         delete_link.on('click', function(e) {
             e.preventDefault();
             if (self.confirm("Are you sure you want to delete this key?")) {
@@ -78,7 +77,7 @@ Y.extend(TokenWidget, Y.Widget, {
             e.preventDefault();
             self.requestKeys();
         });
-        Y.each(this.get('srcNode').all('.bundle'), function(row) {
+        Y.each(this.get('srcNode').all('.js-bundle'), function(row) {
             self.bindDeleteRow(row);
         });
     },
@@ -150,18 +149,17 @@ Y.extend(TokenWidget, Y.Widget, {
     addToken: function(token, token_key) {
         var list = this.get('srcNode').one('ul');
         var row = Y.Node.create('<li />')
-            .addClass('bundle')
-            .append(Y.Node.create('<a />')
-                .set('href', '#')
-                .addClass('delete-link')
-                .addClass('right')
-                .addClass('icon')
-                .addClass('icon--delete'))
-            .append(Y.Node.create('<input />')
-                .set('type', 'text')
-                .addClass('disabled')
-                .set('id', token_key)
-                .set('value', token));
+            .addClass('js-bundle')
+            .addClass('u-equal-height')
+            .append(Y.Node.create('<div />')
+                .addClass('col-8')
+                .addClass('p-code-snippet')
+                    .append(Y.Node.create('<input />')
+                        .set('type', 'text')
+                        .addClass('p-code-snippet__input')
+                        .set('id', token_key)
+                        .set('value', token)))
+            .append(Y.Node.create('<div class="col-1 u-vertically-center"><a class="p-tooltip p-tooltip--top-center js-delete-link"><i class="p-icon--delete"></i><span class="p-tooltip__message" role="tooltip">Delete API key</span></a></div>'))
        list.append(row);
        this.bindDeleteRow(row);
     },
diff --git a/src/maasserver/static/partials/ssh-keys.html b/src/maasserver/static/partials/ssh-keys.html
index 771a1cd..0ddeb6c 100644
--- a/src/maasserver/static/partials/ssh-keys.html
+++ b/src/maasserver/static/partials/ssh-keys.html
@@ -1,94 +1,71 @@
-<div class="table">
-    <header class="table__head">
-        <div class="table__row">
-            <div class="table__header table-col--25">Source</div>
-            <div class="table__header table-col--35">ID</div>
-            <div class="table__header table-col--30">Number of keys</div>
-            <div class="table__header table-col--10"></div>
-        </div>
-    </header>
-    <div class="table__body">
-        <div class="table__row" data-ng-repeat="group in groupedKeys | orderBy:['source', 'authId']"
-            data-ng-class="{ 'is-active': group.id === openRow }">
-            <div class="table__data table-col--25" aria-label="Source">{$ sourceTitles[group.source] $}</div>
-            <div data-ng-if="group.source !== 'upload'">
-                <div class="table__data table-col--35" aria-label="ID">{$ group.authId $}</div>
-                <div class="table__data table-col--30" aria-label="Number of keys">{$ group.keys.length $}
-                    <button class="icon icon--open tooltip u-margin--top-tiny u-padding--left-large" aria-label="Open"
-                      data-ng-click="open(group, 'view')"
-                      data-ng-if="group.source !== 'upload' && openRow !== group.id">Open</button>
-                    <button class="icon icon--close tooltip u-margin--top-tiny u-padding--left-large" aria-label="Close"
-                        data-ng-click="close()"
-                        data-ng-if="group.source !== 'upload' && openRow === group.id">Close</button>
-                </div>
+<div class="row">
+    <div class="col-12">
+        <table class="p-table-expanding">
+            <thead>
+                <tr>
+                    <th class="col-4">Source</th>
+                    <th class="col-4">ID</th>
+                    <th class="col-3">Number of keys</th>
+                    <td class="col-1">&nbsp;</td>
+                </tr>
+            </thead>
+            <tbody>
+                <tr data-ng-repeat="group in groupedKeys | orderBy:['source', 'authId']" data-ng-class="{ 'is-active': group.id === openRow }">
+                    <td aria-label="Source" class="col-4">{$ sourceTitles[group.source] $}</td>
+                    <td data-ng-if="group.source === 'upload'" data-ng-bind-html="trustAsHtml(group.keys[0].display)" colspan="2" class="col-7">&nbsp;</td>
+                    <td data-ng-if="group.source !== 'upload'" aria-label="ID" class="col-4">{$ group.authId $}</td>
+                    <td data-ng-if="group.source !== 'upload'" aria-label="Number of keys" class="col-3">
+                        {$ group.keys.length $}
+                        <a class="p-tooltip p-tooltip--top-right" data-ng-click="open(group, 'view')" aria-label="View keys" data-ng-if="group.source !== 'upload' && (openRow !== group.id || rowMode === 'delete')"><i class="p-icon--plus"></i><span class="p-tooltip__message" role="tooltip">View keys</span></a>
+
+                        <a class="p-tooltip p-tooltip--top-right" data-ng-click="close()" aria-label="Hide keys" data-ng-if="group.source !== 'upload' && openRow === group.id && rowMode === 'view'"><i class="p-icon--minus"></i><span class="p-tooltip__message" role="tooltip">Hide keys</span></a>
+                    </td>
+                    <td class="u-align--right" class="col-1">
+                        <a class="p-tooltip p-tooltip--top-right js-delete-link" data-ng-click="open(group, 'delete')"><i class="p-icon--delete"></i><span class="p-tooltip__message" role="tooltip">Delete SSH key</span></a>
+                    </td>
+                    <td class="p-table-expanding__panel col-12 u-no-margin--left" data-ng-class="{ 'u-hide': group.id !== openRow || rowMode !== 'view' }">
+                        <ul class="p-list">
+                            <li data-ng-repeat="key in group.keys" data-ng-bind-html="trustAsHtml(key.display)"></li>
+                        </ul>
+                    </td>
+                    <td class="p-table-expanding__panel col-12 u-no-margin--left" data-ng-class="{ 'u-hide': group.id !== openRow || rowMode !== 'delete' }">
+                        <div class="col-8">
+                            <span data-ng-if="group.source !== 'upload'"><span class="p-icon p-icon--warning"></span> Are you sure you want to remove this key source?</span>
+                            <span data-ng-if="group.source === 'upload'"><span class="p-icon p-icon--warning"></span> Are you sure you want to remove this key?</span>
+                        </div>
+                        <div class="col-4 u-align--right">
+                            <button class="p-button--base" data-ng-click="close()">Cancel</button>
+                            <button class="p-button--negative" data-ng-click="confirmDelete(group)">Remove</button>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+<div class="row">
+    <div class="col-10">
+        <form class="p-form p-form--inline">
+            <div class="p-form__group">
+                <label class="p-form__label" for="source">Source</label>
+                <select class="p-form__control" id="source" data-ng-model="add.source" data-ng-disabled="add.saving">
+                    <option value="lp">Launchpad</option>
+                    <option value="gh">Github</option>
+                    <option value="upload">Upload</option>
+                </select>
             </div>
-            <div data-ng-if="group.source === 'upload'">
-                <div class="table__data table-col--65" data-ng-bind-html="trustAsHtml(group.keys[0].display)"></div>
+            <div class="p-form__group" data-ng-if="add.source !== 'upload'">
+                <label class="p-form__label" for="authId">ID</label>
+                <input type="text" id="authId" name="authId" placeholder="User ID" data-ng-model="add.authId" data-ng-disabled="add.saving" class="p-form__control">
             </div>
-            <div class="table__data table-col--10 u-align--right">
-                <button class="icon icon--delete tooltip" aria-label="Delete"
-                    data-ng-click="open(group, 'delete')">Delete</button>
+            <div class="p-form__group" data-ng-if="add.source === 'upload'">
+                <label class="p-form__label" for="key">Public key</label>
+                <textarea id="key" name="key" placeholder="Begins with 'ssh-rsa', 'ssh-dss', 'ssh-ed25519', 'ecdsa-sha2-nistp256', 'ecdsa-sha2-nistp384', or 'ecdsa-sha2-nistp521'" data-ng-model="add.key" data-ng-disabled="add.saving" class="p-form__control"></textarea>
             </div>
-            <div class="table__dropdown">
-                <div class="table__row u-border--none"
-                    data-ng-class="{ 'is-active': rowMode === 'view' }">
-                    <div class="u-margin--bottom u-border u-border--solid u-padding--small">
-                        <p data-ng-repeat="key in group.keys" data-ng-bind-html="trustAsHtml(key.display)"></p>
-                    </div>
-                </div>
-                <div class="table__row"
-                    data-ng-class="{ 'is-active': rowMode === 'delete' }">
-                    <div class="table__data u-float--left u-margin--top-tiny" data-ng-if="group.source !== 'upload'">
-                          <p><span class="icon icon--warning u-margin--right-small"></span>Are you sure you want to remove this key source?</p>
-                    </div>
-                    <div class="table__data u-float--left u-margin--top-tiny" data-ng-if="group.source === 'upload'">
-                          <p><span class="icon icon--warning u-margin--right-small"></span>Are you sure you want to remove this key?</p>
-                    </div>
-                    <div class="table__data u-float--right">
-                          <button class="button--base button--inline" data-ng-click="close()">Cancel</button>
-                          <button class="button--destructive button--inline" data-ng-click="confirmDelete(group)">Remove</button>
-                    </div>
-                </div>
+            <div class="p-form__group">
+                <button type="submit" class="p-button--positive" data-ng-disabled="!canImportKeys()" data-ng-click="importKeys()">Import</button>
             </div>
-        </div>
-        <div class="table__dropdown-row is-active">
-            <form class="form form--inline">
-                <div class="table__data table-col u-float--left">
-                    <div class="form__group">
-                        <label class="form__group-label" for="source">Source</label>
-                        <div class="form__group-input">
-                            <select id="source" data-ng-model="add.source" data-ng-disabled="add.saving">
-                                <option value="lp">Launchpad</option>
-                                <option value="gh">Github</option>
-                                <option value="upload">Upload</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="form__group" data-ng-if="add.source !== 'upload'">
-                        <label class="form__group-label" for="authId">ID</label>
-                        <div class="form__group-input">
-                            <input type="text" id="authId" name="authId" placeholder="User ID"
-                                data-ng-model="add.authId" data-ng-disabled="add.saving">
-                        </div>
-                    </div>
-                    <div class="form__group" data-ng-if="add.source === 'upload'">
-                        <label class="form__group-label" for="key">Public key</label>
-                        <div class="form__group-input">
-                            <textarea id="key" name="key" style="width: 300px;" placeholder="Begins with 'ssh-rsa', 'ssh-dss', 'ssh-ed25519', 'ecdsa-sha2-nistp256', 'ecdsa-sha2-nistp384', or 'ecdsa-sha2-nistp521'"
-                                data-ng-model="add.key" data-ng-disabled="add.saving"
-                                style="min-height: 100px;"></textarea>
-                        </div>
-                    </div>
-                    <ul class="form__error errors" data-ng-if="add.error">
-                        <li class="form__error-item">{$ add.error $}</li>
-                    </ul>
-                </div>
-                <div class="table__data u-float--right">
-                    <button type="submit" class="button--secondary button--inline"
-                        data-ng-disabled="!canImportKeys()"
-                        data-ng-click="importKeys()">Import</button>
-                </div>
-            </form>
-        </div>
+            <p data-ng-if="add.error" class="p-form-validation__message"><strong>Error:</strong> {$ add.error $}</p>
+        </form>
     </div>
 </div>
diff --git a/src/maasserver/static/scss/_maas.scss b/src/maasserver/static/scss/_maas.scss
index b4b27ba..d5407bf 100644
--- a/src/maasserver/static/scss/_maas.scss
+++ b/src/maasserver/static/scss/_maas.scss
@@ -37,7 +37,7 @@
 
   // XXX Can be remove when this Vanilla issue is resolved
   // https://github.com/vanilla-framework/vanilla-framework/issues/1505
-  [class^="p-icon--"], 
+  [class^="p-icon--"],
   [class*=" p-icon--"] {
     overflow: hidden;
   }
diff --git a/src/maasserver/static/scss/_patterns_table-expanding.scss b/src/maasserver/static/scss/_patterns_table-expanding.scss
new file mode 100644
index 0000000..a460e17
--- /dev/null
+++ b/src/maasserver/static/scss/_patterns_table-expanding.scss
@@ -0,0 +1,21 @@
+@mixin maas-table-expanding {
+  .p-table-expanding {
+    &__panel {
+      position: relative;
+      top: -1px;
+      background-color: $color-x-light;
+    }
+
+    td {
+      display: table-cell;
+
+      &[colspan='2'] {
+        flex: 2;
+      }
+    }
+
+    tr.is-active {
+      background-color: $color-x-light;
+    }
+  }
+}
diff --git a/src/maasserver/static/scss/build.scss b/src/maasserver/static/scss/build.scss
index 0430a3a..dcb04ab 100644
--- a/src/maasserver/static/scss/build.scss
+++ b/src/maasserver/static/scss/build.scss
@@ -13,6 +13,7 @@
 @import 'patterns_page-header';
 @import 'patterns_tabs';
 @import 'patterns_onoffswitch';
+@import 'patterns_table-expanding';
 
 // Include local patterns
 @include maas;
@@ -22,3 +23,4 @@
 @include maas-page-header;
 @include maas-tabs;
 @include maas-onoffswitch;
+@include maas-table-expanding;
diff --git a/src/maasserver/templates/maasserver/prefs.html b/src/maasserver/templates/maasserver/prefs.html
index 14d1830..bca9da4 100644
--- a/src/maasserver/templates/maasserver/prefs.html
+++ b/src/maasserver/templates/maasserver/prefs.html
@@ -20,68 +20,96 @@
 
 {% block content %}
 <div id="prefs" class="accounts">
-    <div id="keys" class="eight-col">
-        <h2>Keys</h2>
-        <section class="eight-col">
-            <h3>MAAS keys</h3>
-            <div id="api" class="api eight-col">
-                <p>You'll need a separate API key for each Juju environment.</p>
-                <ul class="no-bullets">
-                    {% for token in user.userprofile.get_authorisation_tokens %}
-                    <li class="bundle">
-                        <a href="#" class="delete-link icon icon--delete right"></a>
-                        <input type="text" value="{{ token.consumer.key }}:{{ token.key }}:{{ token.secret }}" id="{{ token.key }}" class="disabled" />
-                    </li>
-                    {% endfor %}
-                </ul>
-                <p id="token_creation_placeholder" />
+    <section id="keys">
+        <div class="p-strip is-bordered">
+            <div class="row">
+                <div class="col-8">
+                    <h2>Keys</h2>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-9">
+                    <h3>MAAS keys</h3>
+                    <div id="api">
+                        <p>You'll need a separate API key for each Juju environment.</p>
+                        <ul class="p-list">
+                            {% for token in user.userprofile.get_authorisation_tokens %}
+                            <li class="u-equal-height js-bundle">
+                                <div class="col-8 p-code-snippet">
+                                    <input type="text" value="{{ token.consumer.key }}:{{ token.key }}:{{ token.secret }}" id="{{ token.key }}" class="p-code-snippet__input" />
+                                </div>
+                                <div class="col-1 u-vertically-center">
+                                    <a class="p-tooltip p-tooltip--top-center js-delete-link"><i class="p-icon--delete"></i><span class="p-tooltip__message" role="tooltip">Delete API key</span></a>
+                                </div>
+                            </li>
+                            {% endfor %}
+                        </ul>
+                        <div id="token_creation_placeholder"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="p-strip is-bordered">
+            <div class="row">
+                <div id="ssh-keys" class="col-8" data-ng-controller="PreferencesController">
+                    <h3>SSH keys</h3>
+                    <span class="u-text--loading" data-ng-if="loading"><i class="p-icon--spinner"></i> Loading...</span>
+                </div>
             </div>
-        </section>
-        <section id="ssh-keys" class="ssh-keys eight-col u-border--bottom" data-ng-controller="PreferencesController">
-            <h3>SSH keys</h3>
-            <span class="u-text--loading" data-ng-if="loading"><i class="p-icon--spinner u-animation--spin"></i> Loading...</span>
             <maas-ssh-keys data-ng-if="!loading"></maas-ssh-keys>
-        </section>
-        <section id="ssl-keys" class="eight-col u-border--bottom">
-            <h3>SSL keys</h3>
-            <div class="eight-col">
-                <ul class="no-bullets">
-                    {% for key in user.sslkey_set.all %}
-                    <li>
-                        <a href="{% url 'prefs-delete-sslkey' key.id %}" class="icon right">
-                            <img title="Delete SSL key" class="left" src="{{ STATIC_URL }}img/delete.png" />
-                        </a>
-                        {{ key.display_html }}
-                    </li>
-                    {% empty %} No SSL key configured. {% endfor %}
-                </ul>
-                <a href="{% url 'prefs-add-sslkey' %}" id="add_ssl_key" class="button--secondary button--inline u-float--right">Add SSL key</a>
+        </div>
+        <div class="p-strip is-bordered">
+            <div class="row">
+                <div class="col-9" id="ssl-keys">
+                    <h3>SSL keys</h3>
+                    <ul class="p-list">
+                        {% for key in user.sslkey_set.all %}
+                        <li class="u-equal-height js-bundle row">
+                            <div class="col-8 p-code-snippet">
+                                <input type="text" value="{{ key.display_html }}" class="p-code-snippet__input" />
+                            </div>
+                            <div class="col-1 u-vertically-center">
+                                <a class="p-tooltip p-tooltip--top-center js-delete-link" href="{% url 'prefs-delete-sslkey' key.id %}"><i class="p-icon--delete"></i><span class="p-tooltip__message" role="tooltip">Delete SSL key</span></a>
+                            </div>
+                        </li>
+                        {% empty %} No SSL key configured. {% endfor %}
+                    </ul>
+                    <div>
+                        <a href="{% url 'prefs-add-sslkey' %}" id="add_ssl_key" class="p-button--neutral u-float--right">Add SSL key</a>
+                    </div>
+                </div>
             </div>
-        </section>
-        <section id="profile" class="eight-col u-border--bottom">
-            <h3>User details</h3>
-            <div class="eight-col">
+        </div>
+    </section>
+
+    <section id="profile" class="p-strip is-bordered">
+        <div class="row">
+            <div class="col-8">
+                <h2>User details</h2>
                 <form method="post" action="{% url 'prefs' %}">{% csrf_token %}
-                    <ul>
+                    <ul class="p-list">
                         {% for field in profile_form %} {% include "maasserver/form_field.html" %} {% endfor %}
                     </ul>
                     <input type="hidden" name="profile_submit" value="1" />
-                    <button type="submit" class="button--positive button--inline u-float--right">Save details</button>
+                    <button type="submit" class="p-button--positive u-float--right">Save details</button>
                 </form>
             </div>
-        </section>
-        <section id="password" class="eight-col">
-            <h3>Password</h3>
-            <div class="eight-col">
+        </div>
+    </section>
+
+    <section id="password" class="p-strip">
+        <div class="row">
+            <div class="col-8">
+                <h2>Password</h2>
                 <form method="post" action="{% url 'prefs' %}">{% csrf_token %}
-                    <ul>
+                    <ul class="p-list">
                         {% for field in password_form %} {% include "maasserver/form_field.html" %} {% endfor %}
                     </ul>
                     <input type="hidden" name="password_submit" value="1" />
-                    <button type="submit" class="button--positive button--inline u-float--right">Save password</button>
+                    <button type="submit" class="p-button--positive u-float--right">Save password</button>
                 </form>
             </div>
-        </section>
-    </div>
+        </div>
+    </section>
 </div>
 {% endblock %}
diff --git a/src/maasserver/templates/maasserver/prefs_add_sslkey.html b/src/maasserver/templates/maasserver/prefs_add_sslkey.html
index 84f17cd..fd754e4 100644
--- a/src/maasserver/templates/maasserver/prefs_add_sslkey.html
+++ b/src/maasserver/templates/maasserver/prefs_add_sslkey.html
@@ -4,16 +4,22 @@
 {% block page-title %}Add SSL key{% endblock %}
 
 {% block content %}
-<div class="eight-col">
-	<form method="post">
-	    {% csrf_token %}
-	    <ul>
-	        {% for field in form %} {% include "maasserver/form_field.html" %} {% endfor %}
-	    </ul>
-			<div class=" u-float--right">
-					<button class="button--base button--inline" href="{% url 'prefs' %}">Cancel</button>
-					<button type="submit" class="button--positive button--inline">Add key</button>
-			</div>
-	</form>
-</div>
+<section class="p-strip">
+    <div class="row">
+        <div class="col-8">
+            <form method="post" class="p-form">
+                {% csrf_token %}
+                <ul class="p-form__group p-list">
+                    {% for field in form %}
+                        {% include "maasserver/form_field.html" %}
+                    {% endfor %}
+                </ul>
+                <div class="p-form__group u-float--right">
+                    <button class="p-button--base" href="{% url 'prefs' %}">Cancel</button>
+                    <button type="submit" class="p-button--positive">Add key</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</section>
 {% endblock %}
diff --git a/src/maasserver/templates/maasserver/prefs_confirm_delete_sslkey.html b/src/maasserver/templates/maasserver/prefs_confirm_delete_sslkey.html
index 55ee2d0..a8cbb2e 100644
--- a/src/maasserver/templates/maasserver/prefs_confirm_delete_sslkey.html
+++ b/src/maasserver/templates/maasserver/prefs_confirm_delete_sslkey.html
@@ -4,14 +4,18 @@
 {% block page-title %}Delete SSL key{% endblock %}
 
 {% block content %}
-<div class="block auto-width">
-    <h2>Are you sure you want to delete the following key?<br /></h2>
-    <p style="word-wrap: break-word; width: 700px;">{{ sslkey }}</p>
-    <p>This action is permanent and can not be undone.</p>
-    <form method="post">{% csrf_token %}
-        <input type="hidden" name="post" value="yes" />
-        <input type="submit" value="Delete key" class="right" />
-        <a href="{% url 'prefs' %}">Cancel</a>
-    </form>
+<div class="p-strip">
+    <div class="row">
+        <div class="col-8">
+            <h2>Are you sure you want to delete the following key?<br /></h2>
+            <p><code>{{ sslkey }}</code></p>
+            <p>This action is permanent and can not be undone.</p>
+            <form method="post">{% csrf_token %}
+                <input type="hidden" name="post" value="yes" />
+                <a href="{% url 'prefs' %}" class="p-button--neutral">Cancel</a>
+                <input type="submit" value="Delete key" class="p-button--negative" />
+            </form>
+        </div>
+    </div>
 </div>
 {% endblock %}