quick-share-upload.html

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

{% set pageName = "Search medical product evaluations" %}

{% block beforeContent %}
  {{ breadcrumb({
    items: [
      {
        text: "Home",
        href: "dashboard"
      },
      {
        text: "Share evaluation",
        href: "#"
      }
    ],
    attributes: {
      "aria-label": "Breadcrumb"
    }
  }) }}
{% endblock %}

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

  
    <h1 class="nhsuk-heading-l">Share your evaluation</h1>
    
  <p class="nhsuk-body">Upload your existing evaluation report for <strong>{{ data['product-picker'] }}</strong></p>

    
      <p>We'll just need a few key details to help other trusts find your evaluation.</p>
    

    <form action="review-evaluation" method="post">

      <!-- Document Upload - REQUIRED -->
      <div class="nhsuk-form-group">
        <fieldset class="nhsuk-fieldset">
          <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
            <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>

      <!-- Alternative: Link to resource -->
      <div class="nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-4">
        <p class="nhsuk-body-s nhsuk-u-secondary-text-color" style="text-align: center;">
          <strong>or</strong>
        </p>
      </div>

      {{ input({
        label: {
          text: "Link to your evaluation",
          classes: "nhsuk-label--s"
        },
        id: "document-link",
        name: "document-link",
        type: "url",
        hint: {
          text: "If you can't upload the document, provide a link to where it's hosted"
        },
        attributes: {
          placeholder: "https://"
        }
      }) }}

      <details class="nhsuk-details nhsuk-u-margin-bottom-0">
        <summary class="nhsuk-details__summary">
          <span class="nhsuk-details__summary-text">
            Tips for sharing links
          </span>
        </summary>
        <div class="nhsuk-details__text">
          <ul class="nhsuk-list nhsuk-list--bullet">
            <li>Make sure the link is accessible to other NHS staff (not restricted to your trust only)</li>
            <li>If using SharePoint, check the sharing settings allow "Anyone with the link" or "People in NHS"</li>
            <li>Test the link in a private browser window to confirm it works</li>
          </ul>
        </div>
      </details>

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

      <!-- Minimal metadata -->
      <h2 class="nhsuk-heading-m">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"
        }
      }) }}

        {{ input({
        label: {
          text: "Trust department",
          classes: "nhsuk-label--s"
        },
        id: "department-name",
        name: "department-name",
        hint: {
          text: "E.g., Cardiology, IT Services, Procurement"
        }
      }) }}

    

      {{ input({
        label: {
          text: "Lead clinician",
          classes: "nhsuk-label--s"
        },
        id: "lead-clinician",
        name: "lead-clinician",
        hint: {
          text: "Name of the clinician who led or supervised this evaluation"
        }
      }) }}

    {% include "includes/suppliers.html" %}


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

{{ dateInput({
  id: "date-of-evaluation",
  name: "date-of-evaluation",
  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",
         classes: "nhsuk-input--width-20"
      }) }}

      {{ input({
        label: {
          text: "UK phone number (optional)",
          classes: "nhsuk-label--s"
        },
        id: "contact-phone",
        name: "contact-phone",
        type: "tel",
        classes: "nhsuk-input--width-20",
        hint: {
          text: "For example, 07700 900000 or 0113 496 0000"
        },
        attributes: {
          autocomplete: "tel"
        }
      }) }}

      {{ checkboxes({
        idPrefix: "contact-topics",
        name: "contact-topics",
        fieldset: {
          legend: {
            text: "What are you willing to discuss?",
            classes: "nhsuk-fieldset__legend--s"
          }
        },
        hint: {
          text: "Select all topics you're happy to be contacted about"
        },
        items: [
          {
            value: "clinical-outcomes",
            text: "Clinical outcomes and effectiveness",
            hint: {
              text: "Patient outcomes, safety data, clinical performance"
            }
          },
          {
            value: "evaluation-methodology",
            text: "Evaluation methodology",
            hint: {
              text: "How you conducted the evaluation, criteria used, lessons learned"
            }
          },
          {
            value: "implementation",
            text: "Implementation and training",
            hint: {
              text: "Rollout experience, staff training, change management"
            }
          },
          {
            value: "integration",
            text: "System integration",
            hint: {
              text: "IT integration, interoperability, data migration"
            }
          },
          {
            value: "procurement-process",
            text: "Procurement process",
            hint: {
              text: "Tender approach, contract terms, supplier engagement"
            }
          },
          {
            value: "costs",
            text: "Costs and value",
            hint: {
              text: "Pricing, total cost of ownership, return on investment"
            }
          },
          {
            value: "supplier-experience",
            text: "Supplier experience",
            hint: {
              text: "Working relationship, support quality, responsiveness"
            }
          }
        ]
      }) }}

   
      <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">You can change this after uploading if needed.</p>
      </div>

    

      <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="dashboard" class="nhsuk-link nhsuk-link--no-visited-state">Cancel</a>
        </p>
      </div>

    </form>

  </div>


</div>


{% endblock %}

{% block pageScripts %}
<script src="https://cdn.jsdelivr.net/npm/accessible-autocomplete@2.0.4/dist/accessible-autocomplete.min.js"></script>
<script type="text/javascript">
  accessibleAutocomplete.enhanceSelectElement({
    defaultValue: '',
    selectElement: document.querySelector('#supplier-picker')
  })
</script>


{% endblock %}