quick-share-upload-v1.html

{% extends prototypeVersion + '/layouts/layout-signed-in.html' %}

{% set pageName = "Quick share evaluation" %}


{% block beforeContent %}
  {{ breadcrumb({
    items: [
      {
        text: "Home",
        href: "/"
      },
      {
        text: "Share evaluation",
        href: "/share-evaluation"
      },
      {
        text: "Quick share",
        href: "/quick-share-upload"
      }
    ],
    attributes: {
      "aria-label": "Breadcrumb"
    }
  }) }}
{% endblock %}

{% block content %}
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">

    <span class="nhsuk-caption-xl">Quick share</span>
    <h1 class="nhsuk-heading-xl">Upload your evaluation documents</h1>
    
    <p class="nhsuk-body">Upload your existing evaluation report for <strong>SmartPump Infusion Device Pro</strong></p>

    <div class="nhsuk-inset-text">
      <span class="nhsuk-u-visually-hidden">Information: </span>
      <p>We'll just need a few key details to help other trusts find your evaluation.</p>
    </div>

    <form action="/quick-share-review" method="post" enctype="multipart/form-data">

      <!-- Document Upload - REQUIRED -->
      <div class="nhsuk-form-group">
        <fieldset class="nhsuk-fieldset">
          <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
            <h2 class="nhsuk-fieldset__heading">
              Upload your evaluation documents
            </h2>
          </legend>
          
          <div class="nhsuk-hint">
            Upload PDF, Word, or Excel files of your evaluation report, clinical trial results, or user feedback.
          </div>

          <div class="nhsuk-form-group">
            <label class="nhsuk-label" for="file-upload">
              Choose files to upload
            </label>
            <div class="nhsuk-hint" id="file-upload-hint">
              You can upload multiple files. Maximum 10MB per file.
            </div>
            <input class="nhsuk-input" id="file-upload" name="file-upload" type="file" multiple accept=".pdf,.doc,.docx,.xls,.xlsx" aria-describedby="file-upload-hint">
          </div>

          <!-- Visual upload area -->
          <div class="nhsuk-card nhsuk-u-padding-4" style="border: 2px dashed #aeb7bd; background: #f0f4f5;">
            <div class="nhsuk-card__content" style="text-align: center;">
              <svg class="nhsuk-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="48" height="48" style="fill: #768692; margin-bottom: 16px;">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
              </svg>
              <p class="nhsuk-body-s nhsuk-u-margin-bottom-2"><strong>Drag and drop files here</strong></p>
              <p class="nhsuk-body-s nhsuk-u-secondary-text-color">or use the button above</p>
            </div>
          </div>

          <!-- File list -->
          <div id="uploaded-files" class="nhsuk-u-margin-top-4" style="display: none;">
            <h3 class="nhsuk-heading-s">Files to upload:</h3>
            <ul class="nhsuk-list" id="file-list">
              <!-- Files will appear here via JavaScript -->
            </ul>
          </div>

        </fieldset>
      </div>

      <hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">

      <!-- Minimal metadata -->
      <h2 class="nhsuk-heading-l">A few quick details</h2>
      <p class="nhsuk-body-s nhsuk-u-secondary-text-color">This helps other trusts understand the context of your evaluation</p>

      {{ input({
        label: {
          text: "Your trust",
          classes: "nhsuk-label--s"
        },
        id: "trust-name",
        name: "trust-name",
        value: "Mid England NHS Foundation Trust",
        attributes: {
          readonly: "readonly"
        }
      }) }}


      {% from "date-input/macro.njk" import dateInput %}

{{ dateInput({
  id: "date-of-birth",
  namePrefix: "date-of-evaluation",
  fieldset: {
    legend: {
      text: "Date of evaluation",
      size: "s"
    }
  },
  hint: {
    text: "Approximate date is fine"
  },
  items: [
    {
      name: "day",
      classes: "nhsuk-input--width-2"
    },
    {
      name: "month",
      classes: "nhsuk-input--width-2"
    },
    {
      name: "year",
      classes: "nhsuk-input--width-4"
    }
  ]
}) }}

      {{ radios({
        idPrefix: "recommendation",
        name: "recommendation",
        fieldset: {
          legend: {
            text: "Did you procure this product following your evaluation?",
            classes: "nhsuk-fieldset__legend--s"
          },
          attributes: {
            "aria-describedby": "recommendation-hint"
          }
        },
        
        items: [
          {
            value: "yes",
            text: "Yes"
          },
          
          {
            value: "no",
            text: "No"
          }
        ]
      }) }}

      {{ textarea({
        name: "summary",
        id: "summary",
        label: {
          text: "Brief summary (optional)",
          classes: "nhsuk-label--s"
        },
        hint: {
          text: "A one-sentence summary of your key finding. This helps other trusts quickly understand your evaluation."
        },
        rows: "2",
        attributes: {
          placeholder: "e.g., Reduced medication errors by 40% but required extended training period"
        }
      }) }}

      <hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">

      <h2 class="nhsuk-heading-m">Contact for queries</h2>
      <p class="nhsuk-body-s nhsuk-u-secondary-text-color">Other trusts may want to ask about your evaluation</p>

      {{ input({
        label: {
          text: "Contact name",
          classes: "nhsuk-label--s"
        },
        id: "contact-name",
        name: "contact-name",
        hint: {
          text: "The person other trusts should contact with questions"
        }
      }) }}

      {{ input({
        label: {
          text: "Email address",
          classes: "nhsuk-label--s"
        },
        id: "contact-email",
        name: "contact-email",
        type: "email"
      }) }}

      <div class="nhsuk-warning-callout nhsuk-u-margin-top-6">
        <h3 class="nhsuk-warning-callout__label">
          <span role="text">
            <span class="nhsuk-u-visually-hidden">Important: </span>
            Who can see this?
          </span>
        </h3>
        <p>Your evaluation will be visible to <strong>all NHS trusts</strong> using Compass.</p>
        <p class="nhsuk-body-s">You can change this after uploading if needed.</p>
      </div>

      {{ checkboxes({
        idPrefix: "declaration",
        name: "declaration",
        items: [
          {
            value: "confirm",
            text: "I confirm this evaluation was conducted according to our trust's protocols",
            hint: {
              text: "Required before you can share"
            }
          }
        ]
      }) }}

      <div class="nhsuk-form-group nhsuk-u-margin-top-6">
        <button class="nhsuk-button" data-module="nhsuk-button" type="submit">
          Review and submit
        </button>
        <p>
          <a href="/share-evaluation-choice" class="nhsuk-link nhsuk-link--no-visited-state">Cancel</a>
        </p>
      </div>

    </form>

  </div>

  <div class="nhsuk-grid-column-one-third">
    <div class="nhsuk-card nhsuk-u-margin-top-7">
      <div class="nhsuk-card__content">
        <h3 class="nhsuk-card__heading">Quick share checklist</h3>
        <ul class="nhsuk-list nhsuk-list--tick nhsuk-body-s">
          <li>
            <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12"></path>
            </svg>
            Upload documents
          </li>
          <li>
            <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12"></path>
            </svg>
            Add basic details
          </li>
          <li>
            <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12"></path>
            </svg>
            Confirm and submit
          </li>
        </ul>
        <p class="nhsuk-body-s nhsuk-u-secondary-text-color">Should take about 5 minutes</p>
      </div>
    </div>

    <div class="nhsuk-card nhsuk-card--care nhsuk-u-margin-top-4">
      <div class="nhsuk-card__content">
        <h3 class="nhsuk-card__heading">What documents to upload?</h3>
        <p class="nhsuk-body-s">Upload any of these:</p>
        <ul class="nhsuk-list nhsuk-list--bullet nhsuk-body-s">
          <li>Evaluation reports</li>
          <li>Clinical trial results</li>
          <li>User feedback summaries</li>
          <li>Safety assessments</li>
          <li>Cost-benefit analyses</li>
        </ul>
      </div>
    </div>

    <details class="nhsuk-details nhsuk-u-margin-top-4">
      <summary class="nhsuk-details__summary">
        <span class="nhsuk-details__summary-text">
          Want more structure?
        </span>
      </summary>
      <div class="nhsuk-details__text">
        <p class="nhsuk-body-s">If you'd like your evaluation to be more searchable and comparable, consider using the <a href="/evaluation-details">full evaluation form</a> instead.</p>
      </div>
    </details>
  </div>
</div>

<script>
// Simple file upload preview
document.getElementById('file-upload').addEventListener('change', function(e) {
  const fileList = document.getElementById('file-list');
  const uploadedFiles = document.getElementById('uploaded-files');
  
  fileList.innerHTML = '';
  
  if (e.target.files.length > 0) {
    uploadedFiles.style.display = 'block';
    
    Array.from(e.target.files).forEach(file => {
      const li = document.createElement('li');
      const fileSize = (file.size / 1024 / 1024).toFixed(2);
      li.innerHTML = `
        <svg class="nhsuk-icon nhsuk-icon__link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="18" height="18">
          <path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10 10 10 0 0 1-10-10A10 10 0 0 1 12 2zm0 18a8 8 0 0 0 8-8 8 8 0 0 0-8-8 8 8 0 0 0-8 8 8 8 0 0 0 8 8zm0-13a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V8a1 1 0 0 1 1-1zm0 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
        </svg>
        ${file.name} (${fileSize} MB)
      `;
      fileList.appendChild(li);
    });
  } else {
    uploadedFiles.style.display = 'none';
  }
});
</script>
{% endblock %}