Put actions at the top on single template page

The links to the right of the template take up valuable horizontal
space. This means that the preview of email and letter templates isn’t
as big as it could be. By making the letter preview bigger it removes
the need to click through to the PDF to see a preview.

Reuses the navigation style used on the API integration page, because I
think it damages consistency to create another new button style.

app/templates/views/templates/_template.html

@@ -1,25 +1,51 @@
-<div class="column-two-thirds">
-  {{ template|string }}
-</div>
-<div class="column-one-third">
+<div class="column-whole">
   {% if template._template.archived %}
     <div class="message-updated-at">
       This template was deleted<br/>{{ template._template.updated_at|format_date_normal }}
-    </div>
+    </p>
   {% else %}
-    <div class="message-use-links{% if show_title %}-with-title{% endif %}">
-      {% if current_user.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters']) %}
-        <a href="{{ url_for(".send_messages", service_id=current_service.id, template_id=template.id) }}" class="primary">
+    <div class="bottom-gutter-2-3">
+      <div class="grid-row">
+        {% if current_user.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters']) %}
+        <div class="{{ 'column-half' if template.template_type == 'letter' else 'column-third' }}">
+          <a href="{{ url_for(".send_messages", service_id=current_service.id, template_id=template.id) }}" class="pill-separate-item">
+            Upload recipients
+          </a>
+        </div>
+        <div class="{{ 'column-half' if template.template_type == 'letter' else 'column-third' }}">
+          <a href="{{ url_for(".send_test", service_id=current_service.id, template_id=template.id) }}" class="pill-separate-item">
+            {{ 'Generate preview' if template.template_type == 'letter' else 'Send yourself a test' }}
+          </a>
+        </div>
+        {% endif %}
+        {% if
+          current_user.has_permissions(permissions=['manage_templates'], admin_override=True) and
+          template.template_type != 'letter'
+        %}
+        <div class="column-one-third">
+          <a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}" class="pill-separate-item">
+            Edit template
+          </a>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+    {% if current_user.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters']) %}
+      <p class="bottom-gutter-1-2">
+        <a href="{{ url_for(".send_messages", service_id=current_service.id, template_id=template.id) }}" class="heading-medium">
           Upload recipients
         </a>
-      <a href="{{ url_for(".send_test", service_id=current_service.id, template_id=template.id) }}">
-        Send yourself a test
-      </a>
+        &emsp;
+        <a href="{{ url_for(".send_test", service_id=current_service.id, template_id=template.id) }}" class="heading-medium">
+          Send yourself a test
+        </a>
+      </p>
+    {% endif %}
+    {% if current_user.has_permissions(permissions=['manage_templates'], admin_override=True) %}
+       <a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}" class="edit-template-link">Edit</a>
     {% endif %}
-      {% if current_user.has_permissions(permissions=['manage_templates'], admin_override=True) %}
-         <a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}">Edit template</a>
-      {% endif %}
-      <a href="{{ url_for(".send_from_api", service_id=current_service.id, template_id=template.id) }}">API info</a>
-    </div>
   {% endif %}
 </div>
+<div class="column-whole">
+  {{ template|string }}
+</div>

tests/app/main/views/test_templates.py

@@ -33,6 +33,57 @@ def test_should_show_page_for_one_template(
     mock_get_service_template.assert_called_with(service_one['id'], template_id)
 
 
+@pytest.mark.parametrize('permissions, links_to_be_shown', [
+    (
+        ['view_activity'],
+        []
+    ),
+    (
+        ['manage_templates'],
+        ['.edit_service_template']
+    ),
+    (
+        ['send_texts', 'send_emails', 'send_letters'],
+        ['.send_messages', '.send_test']
+    ),
+    (
+        ['send_texts', 'send_emails', 'send_letters', 'manage_templates'],
+        ['.send_messages', '.send_test', '.edit_service_template']
+    ),
+])
+def test_should_be_able_to_view_a_template_with_links(
+    client,
+    mock_get_service_template,
+    active_user_with_permissions,
+    mocker,
+    service_one,
+    fake_uuid,
+    permissions,
+    links_to_be_shown,
+):
+    active_user_with_permissions._permissions[service_one['id']] = permissions
+    client.login(active_user_with_permissions, mocker, service_one)
+
+    response = client.get(url_for(
+        '.view_template',
+        service_id=service_one['id'],
+        template_id=fake_uuid
+    ))
+
+    assert response.status_code == 200
+    page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
+    links_in_page = page.select('.pill-separate-item')
+
+    assert len(links_in_page) == len(links_to_be_shown)
+
+    for index, link_to_be_shown in enumerate(links_to_be_shown):
+        assert links_in_page[index]['href'] == url_for(
+            link_to_be_shown,
+            service_id=service_one['id'],
+            template_id=fake_uuid,
+        )
+
+
 def test_should_show_sms_template_with_downgraded_unicode_characters(
     logged_in_client,
     mocker,