-# interface: @buttons

%html
   %head
      %title
         Lopoco Database Viewer

      = csrf_meta_tags

      :css
         * {
            margin: 0;
            padding: 0;
         }
         .pane {
            display: inline-block;
            height: 100%;
            margin: 10px;
            vertical-align: top;
            border: solid 2px rgb( 255, 0, 0 );
            -webkit-border-radius: 5px;
         }
         .button {
            display: block;
            width: 150px;
            margin: 10px;
            -webkit-border-radius: 5px;
            font: bold 14pt calibri;
            text-decoration: none;
            text-align: center;
            line-height: 1.5;
         }
         .normal {
            color: rgb( 0, 0, 0 );
            border: solid 2px rgb( 0, 0, 255 );
            background-color: rgb( 200, 200, 200 );
         }
         .grey {
            color: rgb( 100, 100, 100 );
            border: solid 2px rgb( 100, 100, 100 );
            background-color: rgb( 220, 220, 220 );
         }
         #title {
            margin: 10px;
            border: solid 2px rgb( 0, 0, 255 );
            -webkit-border-radius: 5px;
            background-color: rgb( 200, 200, 200 );
            font: bold 14pt calibri;
            text-align: center;
            line-height: 1.5;
         }
         table {
            display: block;
            margin: 10px;
            padding: 10px;
            border-collapse: collapse;
            border: solid 2px rgb( 0, 0, 0 );
            -webkit-border-radius: 5px;
         }
         td, th {
            padding: 10px;
            border: solid 1px rgb( 0, 0, 0 );
            text-align: center;
         }
         .input {
            display: inline-block;
            width: 50px;
            text-align: right;
            margin: 20px;
         }
         textarea {
            display: inline;
            width: 150px;
         }

   %body
      %div.pane
         = @buttons.html_safe
      %div.pane
         = yield