commit 5f5de85952443a695ccf88b750e93e9130f0dd1f
Author: David Friesecký <frieseck@students.zcu.cz>
Date:   Thu Apr 15 16:11:52 2021 +0200

    Re #8568 - Added buttons and list of certificates
    - added button download certificate, download public/private key

diff --git a/static/certificate_detailed_view.html b/static/certificate_detailed_view.html
index 28af6e3..93090be 100644
--- a/static/certificate_detailed_view.html
+++ b/static/certificate_detailed_view.html
@@ -3,26 +3,15 @@
 <head>
     <meta charset="UTF-8">
     <title>X.509 Certificate Management</title>
+    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
 
-    <!-- Latest compiled and minified CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-
-    <!-- jQuery library -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-
-    <!-- Popper JS -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
-
-    <!-- Latest compiled JavaScript -->
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <style>
-        ul, #tree-detailed-view {
-          list-style-type: none;
+        .w-65 {
+            max-width: 65%;
         }
 
-        #tree-detailed-view {
-            margin: 0;
-            padding: 0;
+        .w-35 {
+            max-width: 35%;
         }
 
         .caret-back::before {
@@ -42,17 +31,18 @@
     </style>
 </head>
 <body class="p-4">
-    <div id="certificate-detailed-view-content" class="container">
-        <div class="row">
+    <div id="certificate-detailed-view-content" class="p-4">
+        <div>
             <h1 class="ml-2 d-inline-block">Certificate Detailed View</h1>
-            <div>
-                <a class="btn btn-warning ml-4 mb-3" href="">Revoke certificate</a>
-                <a class="btn btn-danger ml-4 mb-3" href="">Delete certificate</a>
-            </div>
+            <span class="ml-2 d-inline-block">
+                <a class="btn btn-success ml-2 mb-3" href="">Download certificate</a>
+                <a class="btn btn-warning ml-2 mb-3" href="">Revoke certificate</a>
+                <a class="btn btn-danger ml-2 mb-3" href="">Delete certificate</a>
+            </span>
         </div>
-        <a class="ml-auto" href=""><span class="caret-back font-weight-bold">Issuing Certificate Authority</span></a>
+        <a href=""><span class="caret-back font-weight-bold">Issuing Certificate Authority</span></a>
         <div class="row">
-            <div class="col-md-6">
+            <div class="col-lg-6">
                 <table class="ml-auto mr-auto">
                     <tr>
                         <div class="form-group">
@@ -154,9 +144,37 @@
                         </td>
                     </tr>
                 </table>
+                <div class="text-center">
+                    <a class="btn btn-success m-1" href="">Download Public Key</a>
+                    <a class="btn btn-success m-1" href="">Download Private Key</a>
+                </div>
             </div>
-            <div class="col-md-6">
-                TODO list
+            <div class="col-xl-6 table-responsive">
+                <table class="table table-striped table-hover">
+                    <thead class="thead-dark text-center">
+                        <tr>
+                            <th scope="col" colspan="2">Issued Certificates</th>
+                        </tr>
+                        <tr>
+                            <th class="w-65" scope="col">Common Name</th>
+                            <th class="w-35" scope="col">Type</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>&ltsome_certificate_name&gt</td>
+                            <td>&lttype&gt</td>
+                        </tr>
+                        <tr>
+                            <td>&ltsome_certificate_long_name&gt</td>
+                            <td>&ltCA&gt</td>
+                        </tr>
+                        <tr>
+                            <td>&ltsome _certificat e_very____________ _________l on gname&gt</td>
+                            <td>&ltEnd Certificate&gt</td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
         </div>
     </div>
@@ -172,5 +190,8 @@
       });
     }
     </script>
+
+    <script src="/static/js/jquery-3.6.0.min.js"></script>
+    <script src="/static/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
\ No newline at end of file
