scinote-web/app/views/reports/templates/template_3/cover.html.erb

<div class="report-template-index">
  <style type="text/css" scoped>
    .report-template-index .template-table {
      height: 297mm;
      width: 100%;
      font-size: 16px;
      border-collapse: collapse;
      border-spacing: 0;
      table-layout: fixed;
    }

    .align-center {
      text-align: center;
    }

    .executive-summary {
      height: 170mm;
    }

    ul {
      list-style-type: none;
      padding: 0;
    }

    li {
      padding: .5em 0;
    }

    .divider {
      height: 4px;
      background: black;
      width: 100%;
    }

  </style>

  <table class="template-table">
    <tr>
      <td colspan=2 class="logo"></td>
      <td colspan=2></td>
    </tr>
    <tr>
      <td colspan=4 class="align-center"><b>OTR-Short Form Report</b></td>
    </tr>
    <tr>
      <td colspan=4><div class="divider"></div></td>
    </tr>
    <tr>
      <td><b>Date:</b></td>
      <td colspan=3><%= render Reports::DateInputComponent.new(report: report, name: :report_date, label: 'Date', editing: false) %></td>
    </tr>
    <tr>
      <td><b>From:</b> </td>
      <td colspan=3><%= render Reports::TextInputComponent.new(report: report, name: :report_from, label: 'From', editing: false) %></td>
    </tr>
    <tr>
      <td><b>Through:</b></td>
      <td colspan=3><%= render Reports::TextInputComponent.new(report: report, name: :report_through, label: 'Through', editing: false) %></td>
    </tr>
    <tr>
      <td><b>To:</b></td>
      <td colspan=3><%= render Reports::TextInputComponent.new(report: report, name: :report_to, label: 'To', editing: false) %></td>
    </tr>
    <tr>
      <td><b>Subject:</b></td>
      <td colspan=3><%= render Reports::TextInputComponent.new(report: report, name: :report_subject, label: 'Subject', editing: false) %></td>
    </tr>
    <tr>
      <td colspan=4><div class="divider"></div></td>
    </tr>
    <tr class="executive-summary">
      <td colspan=4 style="vertical-align: top;">
        <ul>
          <li><b>Report file name:&nbsp;</b><%= render Reports::TextInputComponent.new(report: report, name: :report_file_name, label: 'Report file name', editing: false) %></li>
          <li><b>Associated Protocol:&nbsp;</b><%= render Reports::TextInputComponent.new(report: report, name: :associated_protocol, label: 'Associated Protocol', editing: false) %></li>
          <li><b>Background:&nbsp;</b><%= render Reports::LargeTextInputComponent.new(report: report, name: :report_background, label: 'Background', editing: false) %></li>
          <li><b>Conclusions:&nbsp;</b><%= render Reports::LargeTextInputComponent.new(report: report, name: :outcome_impact, label: 'Conclusions', editing: false) %></li>
          <li><b>Results and Discussion&nbsp;</b><%= render Reports::LargeTextInputComponent.new(report: report, name: :results, label: 'Results and Discussion', editing: false) %></li>
          <li><b>References (if needed)&nbsp;</b><%= render Reports::LargeTextInputComponent.new(report: report, name: :references, label: 'References (if needed)', editing: false) %></li>
          <li><b>Records Management Project Name:&nbsp;</b><%= render Reports::LargeTextInputComponent.new(report: report, name: :management_project_name, label: 'Records Management Project Name', editing: false) %></li>
        </ul>
      </td>
    </tr>
    <tr style="height: 30px">
      <td colspan=1><%= render Reports::TextInputComponent.new(report: report, name: :report_file_name, label: 'Report file name', editing: false) %></td>
      <td colspan=2 class="align-center">Page 1 of <%= total_pages + 1 %></td>
      <td colspan=1><%= render Reports::DateInputComponent.new(report: report, name: :report_date, label: 'Date', editing: false) %></td>
    </tr>
  </table>
</div>