Example Reports List report

Contents

    <div class="govuk-width-container">
      <div class="govuk-width-container report-list-container">
    
        <h3 class="govuk-heading-s screen-hide">
          Printing this report has been disabled due to time or content sensitivity.<br />
          Please speak to your report administrator for further details.
        </h3>
    
        <div class="dpr-reports-heading-container govuk-!-margin-top-5">
    
          <div class="dpr-report-header">
            <div class="dpr-report-heading">
    
              <div class="dpr-report-heading__title">
                <span class="govuk-caption-l">Example Report</span>
                <h1 class="govuk-heading-l">
                  List template
                </h1>
              </div>
    
              <div class="dpr-report-heading__actions">
    
                <div class="report-actions" data-dpr-module='report-actions'>
                  <div class="moj-button-menu"></div>
    
                  <div class="dpr-display-none">
    
                  </div>
                </div>
    
              </div>
    
            </div>
    
            <details class="govuk-details dpr-meta-data-details">
              <summary class="govuk-details__summary">
                <span class="govuk-details__summary-text">
                  Report details
                </span>
              </summary>
              <div class="govuk-details__text">
    
                <div class="dpr-request-details">
    
                  <table class="dpr-request-details__table">
                    <tbody>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
                        </td>
                        <td>
                          <h1 class="govuk-heading-s govuk-!-margin-bottom-1">List template</h1>
                        </td>
                      </tr>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
                        </td>
                        <td>
                          <h1 class="govuk-heading-s govuk-!-margin-bottom-1">Example Report</h1>
                        </td>
                      </tr>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
                        </td>
                        <td>
                          <p class="govuk-body-m govuk-!-margin-bottom-1">Example of a list template</p>
                        </td>
                      </tr>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Classification:</p>
                        </td>
                        <td>
                          <p class="govuk-body-m govuk-!-margin-bottom-1">OFFICIAL</p>
                        </td>
                      </tr>
    
                    </tbody>
                  </table>
                </div>
    
              </div>
            </details>
    
            <div class="dpr-report-details-print">
    
              <div class="dpr-request-details">
    
                <table class="dpr-request-details__table">
                  <tbody>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
                      </td>
                      <td>
                        <h1 class="govuk-heading-s govuk-!-margin-bottom-1">List template</h1>
                      </td>
                    </tr>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
                      </td>
                      <td>
                        <h1 class="govuk-heading-s govuk-!-margin-bottom-1">Example Report</h1>
                      </td>
                    </tr>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
                      </td>
                      <td>
                        <p class="govuk-body-m govuk-!-margin-bottom-1">Example of a list template</p>
                      </td>
                    </tr>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Classification:</p>
                      </td>
                      <td>
                        <p class="govuk-body-m govuk-!-margin-bottom-1">OFFICIAL</p>
                      </td>
                    </tr>
    
                  </tbody>
                </table>
              </div>
    
            </div>
          </div>
    
        </div>
    
        <div class="report-template-container  print-hide">
    
          <div class="dpr-sync-report-actions">
    
            <div class='dpr-interactive-filters-section'>
    
              <div class='dpr-selected-filters-container'>
                <div class='dpr-selected-filters'>
    
                  <p class="govuk-body"><strong>Filters:</strong></p>
    
                  <a href="#" class="govuk-link govuk-body interactive-remove-filter-button" data-query-param-key=[&quot;radio&quot;] data-query-param-value='[[&quot;Two&quot;]]' data-query-constraint-values=''>
                    Radio filter: Two
                  </a>
    
                </div>
              </div>
    
              <details class="govuk-details" id="dpr-interactive-filters-details">
                <summary class="govuk-details__summary">
                  <span class="govuk-details__summary-text">
                    Update filters
                  </span>
                </summary>
                <div class="govuk-details__text">
    
                  <div class='dpr-interactive-filters'>
                    <div data-dpr-module="interactive-filters" class="dpr-filters sync-filters-form--hidden">
    
                      <form id="interactive-filters-form">
                        <div id="query-error-summary" class="query-error-summary query-error-summary--hidden">
                          <div class="govuk-error-summary" data-module="govuk-error-summary">
                            <div role="alert">
                              <h2 class="govuk-error-summary__title">
                                There is a problem
                              </h2>
                              <div class="govuk-error-summary__body">
    
                              </div>
                            </div>
                          </div>
    
                        </div>
    
                        <div class="filter-form-container">
                          <div class="filter-container">
    
                            <div class="dpr-filter-item ">
    
                              <div class="govuk-form-group">
    
                                <fieldset class="govuk-fieldset" aria-describedby="filters.field1-hint">
    
                                  <legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
    
                                    Radio filter
    
                                  </legend>
    
                                  <div id="filters.field1-hint" class="govuk-hint">
                                    (Optional)
                                  </div>
    
                                  <div class="govuk-radios govuk-radios--small" display-name="Radio filter" data-module="govuk-radios">
    
                                    <div class="govuk-radios__item">
                                      <input class="govuk-radios__input" id="filters.field1" name="filters.field1" type="radio" value="one">
                                      <label class="govuk-label govuk-radios__label" for="filters.field1">
                                        One
                                      </label>
    
                                    </div>
    
                                    <div class="govuk-radios__item">
                                      <input class="govuk-radios__input" id="filters.field1-2" name="filters.field1" type="radio" value="two" checked>
                                      <label class="govuk-label govuk-radios__label" for="filters.field1-2">
                                        Two
                                      </label>
    
                                    </div>
    
                                  </div>
    
                                </fieldset>
    
                              </div>
    
                            </div>
    
                            <div class="dpr-filter-item ">
    
                              <div class="govuk-form-group">
                                <label class="govuk-label govuk-label govuk-!-font-weight-bold" for="filters.select">
                                  Select filter
                                </label>
    
                                <div id="filters.select-hint" class="govuk-hint">
                                  (Optional)
                                </div>
    
                                <select class="govuk-select" id="filters.select" name="filters.select" aria-describedby="filters.select-hint" display-name="Select filter">
    
                                  <option value="" selected disabled>Select your option</option>
    
                                  <option value="no-filter">None</option>
    
                                  <option value="value2.1">Value 2.1</option>
    
                                  <option value="value2.2">Value 2.2</option>
    
                                  <option value="value2.3">Value 2.3</option>
    
                                </select>
    
                              </div>
    
                            </div>
    
                            <div class="dpr-filter-item ">
    
                              <div class="dpr-autocomplete-text-input" data-dpr-module="autocomplete-text-input">
    
                                <div class="govuk-form-group">
                                  <label class="govuk-label govuk-!-font-weight-bold dpr-inline-label" for="filters.autocomplete">
                                    Autocomplete
                                  </label>
    
                                  <div id="filters.autocomplete-hint" class="govuk-hint">
                                    (Optional)
                                  </div>
    
                                  <div class="govuk-input__wrapper">
    
                                    <input class="govuk-input  autocomplete-text-input-box govuk-input--width-20" id="filters.autocomplete" name="filters.autocomplete" type="search" aria-describedby="filters.autocomplete-hint" autocomplete="off" aria-autocomplete="list" aria-expanded="false" aria-owns="filtersautocomplete-list" haspopup="true" data-minimum-length="3" data-resource-endpoint="" placeholder="Search" role="combobox" pattern=".+" display-name="Autocomplete">
    
                                    <div class="govuk-input__suffix" aria-hidden="true">&#x1F50D;</div>
    
                                  </div>
    
                                </div>
    
                                <div id="filtersautocomplete-list" class="autocomplete-text-input-list">
                                  <ul role="listbox" aria-label="Autocomplete options">
    
                                    <li class="autocomplete-text-input-item-hide">
    
                                      <button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="Fezzick">
                                        Fezzick
                                      </button>
    
                                    </li>
    
                                    <li class="autocomplete-text-input-item-hide">
    
                                      <button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="inigo-montoya">
                                        Inigo Montoya
                                      </button>
    
                                    </li>
    
                                    <li class="autocomplete-text-input-item-hide">
    
                                      <button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="Prince Humperdink">
                                        Prince Humperdink
                                      </button>
    
                                    </li>
    
                                    <li class="autocomplete-text-input-item-hide">
    
                                      <button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="PrBu">
                                        Princess Buttercup
                                      </button>
    
                                    </li>
    
                                    <li class="autocomplete-text-input-item-hide">
    
                                      <button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="Westley">
                                        Westley
                                      </button>
    
                                    </li>
    
                                  </ul>
                                </div>
                              </div>
    
                            </div>
    
                            <div class="dpr-filter-item ">
    
                              <div class="govuk-form-group govuk-!-margin-bottom-3">
    
                                <fieldset class="govuk-fieldset" aria-label="filters.field7 checkboxes">
    
                                  <legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
    
                                    Multiselect
    
                                  </legend>
    
                                  <div class="govuk-checkboxes govuk-checkboxes--small dpr-multi-select" display-name="Multiselect" data-module="govuk-checkboxes">
    
                                    <div class="govuk-checkboxes__item">
                                      <input class="govuk-checkboxes__input" id="filters.field7" name="filters.field7" type="checkbox" value="value8.1">
                                      <label class="govuk-label govuk-checkboxes__label" for="filters.field7">
                                        Value 8.1
                                      </label>
    
                                    </div>
    
                                    <div class="govuk-checkboxes__item">
                                      <input class="govuk-checkboxes__input" id="filters.field7-2" name="filters.field7" type="checkbox" value="value8.2" checked>
                                      <label class="govuk-label govuk-checkboxes__label" for="filters.field7-2">
                                        Value 8.2
                                      </label>
    
                                    </div>
    
                                    <div class="govuk-checkboxes__item">
                                      <input class="govuk-checkboxes__input" id="filters.field7-3" name="filters.field7" type="checkbox" value="value8.3" checked>
                                      <label class="govuk-label govuk-checkboxes__label" for="filters.field7-3">
                                        Value 8.3
                                      </label>
    
                                    </div>
    
                                    <div class="govuk-checkboxes__item">
                                      <input class="govuk-checkboxes__input" id="filters.field7-4" name="filters.field7" type="checkbox" value="value8.4">
                                      <label class="govuk-label govuk-checkboxes__label" for="filters.field7-4">
                                        Value 8.4
                                      </label>
    
                                    </div>
    
                                  </div>
    
                                </fieldset>
    
                              </div>
    
                            </div>
    
                            <div class="dpr-filter-item  dpr-filter-item__span-2 ">
    
                              <div class="govuk-form-group">
    
                                <div class="dpr-date-range" data-dpr-module="date-range-input">
                                  <fieldset class="govuk-fieldset">
                                    <legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
                                      Daterange
                                    </legend>
    
                                    <div id='dpr-date-range' data-field-name='daterange'>
    
                                      <div class="dpr-daterange__start-end-date-wrapper">
    
                                        <div class="dpr-daterange__start-date">
    
                                          <div class="dpr-date" data-dpr-module="date-input" data-required="false" data-display-name="Start date" data-pattern="\d{1,2}\/\d{1,2}\/\d{2,4}" data-min="2003-02-01" data-max="2007-05-04" data-pattern-hint="DD/MM/YYYY">
    
                                            <div class="moj-datepicker" data-module="moj-date-picker" data-min-date="01/02/2003" data-max-date="04/05/2007">
    
                                              <div class="govuk-form-group">
                                                <label class="govuk-label" for="filters.daterange.start">
                                                  Start
                                                </label>
    
                                                <div id="filters.daterange.start-hint" class="govuk-hint">
                                                  For example 17/05/2024.
                                                </div>
    
                                                <input class="govuk-input moj-js-datepicker-input " id="filters.daterange.start" name="filters.daterange.start" type="text" value="01/02/2003" aria-describedby="filters.daterange.start-hint" autocomplete="off">
    
                                              </div>
    
                                            </div>
    
                                            <a class="govuk-body-s daterange-set-to-minmax" data-set-to-input='filters.daterange.start' data-set-min-max-value=01/02/2003 data-set-min-max-trigger='true' href="#">
                                              set to min (01/02/2003)
                                            </a>
    
                                          </div>
    
                                        </div>
    
                                        <div class="dpr-daterange__end-date">
    
                                          <div class="dpr-date" data-dpr-module="date-input" data-required="false" data-display-name="End date" data-pattern="\d{1,2}\/\d{1,2}\/\d{2,4}" data-min="2003-02-01" data-max="2007-05-04" data-pattern-hint="DD/MM/YYYY">
    
                                            <div class="moj-datepicker" data-module="moj-date-picker" data-min-date="01/02/2003" data-max-date="04/05/2007">
    
                                              <div class="govuk-form-group">
                                                <label class="govuk-label" for="filters.daterange.end">
                                                  End
                                                </label>
    
                                                <div id="filters.daterange.end-hint" class="govuk-hint">
                                                  For example 17/05/2024.
                                                </div>
    
                                                <input class="govuk-input moj-js-datepicker-input " id="filters.daterange.end" name="filters.daterange.end" type="text" value="04/05/2006" aria-describedby="filters.daterange.end-hint" autocomplete="off">
    
                                              </div>
    
                                            </div>
    
                                            <a class="govuk-body-s daterange-set-to-minmax" data-set-to-input='filters.daterange.end' data-set-min-max-value=04/05/2007 data-set-min-max-trigger='true' href="#">
                                              set to max (04/05/2007)
                                            </a>
    
                                          </div>
    
                                        </div>
                                      </div>
    
                                    </div>
    
                                  </fieldset>
                                </div>
    
                              </div>
    
                            </div>
    
                            <div class="dpr-filter-item ">
    
                              <div class="govuk-form-group govuk-form-group--error">
                                <label class="govuk-label govuk-!-font-weight-bold" for="filters.text">
                                  Text
                                </label>
    
                                <p id="filters.text-error" class="govuk-error-message">
    
                                  <span class="govuk-visually-hidden">Error:</span>
    
                                </p>
    
                                <input class="govuk-input govuk-input--width-20 govuk-input--error" id="filters.text" name="filters.text" type="text" aria-describedby="filters.text-error" pattern=".+" required="true" display-name="Text">
    
                              </div>
    
                            </div>
    
                          </div>
    
                          <div class="filter-actions">
    
                            <div class="govuk-button-group">
    
                              <button type="submit" class="govuk-button govuk-button--primary" data-module="govuk-button" id="interactive-apply-filters-button">
                                Apply Filters
                              </button>
    
                              <a id="interactive-reset-filters-button" class="govuk-link govuk-link--no-visited-state dpr-reset-columns-button" href="#" defaultQuery="">Reset filters</a>
    
                            </div>
    
                          </div>
                        </div>
    
                      </form>
    
                    </div>
                  </div>
    
                </div>
              </details>
    
            </div>
    
            <div class="dpr-columns-section-wrapper">
    
              <div class="columns-section-button">
                <details class="govuk-details">
                  <summary class="govuk-details__summary">
                    <span class="govuk-details__summary-text">
                      Columns (3 of 3 shown)
                    </span>
                  </summary>
                  <div class="govuk-details__text">
    
                    <form data-dpr-module="columns" class="dpr-columns-form">
                      <div class="columns-container">
    
                        <div class="govuk-form-group govuk-!-margin-bottom-3">
    
                          <fieldset class="govuk-fieldset" aria-label="columns checkboxes">
    
                            <legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
    
                              Select report columns
    
                            </legend>
    
                            <div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
    
                              <div class="govuk-checkboxes__item">
                                <input class="govuk-checkboxes__input" id="columns" name="columns" type="checkbox" value="name" checked>
                                <label class="govuk-label govuk-checkboxes__label" for="columns">
                                  Name
                                </label>
    
                              </div>
    
                              <div class="govuk-checkboxes__item">
                                <input class="govuk-checkboxes__input" id="columns-2" name="columns" type="checkbox" value="location" checked disabled>
                                <label class="govuk-label govuk-checkboxes__label" for="columns-2">
                                  Location
                                </label>
    
                              </div>
    
                              <div class="govuk-checkboxes__item">
                                <input class="govuk-checkboxes__input" id="columns-3" name="columns" type="checkbox" value="total" checked>
                                <label class="govuk-label govuk-checkboxes__label" for="columns-3">
                                  Total
                                </label>
    
                              </div>
    
                            </div>
    
                          </fieldset>
    
                        </div>
    
                      </div>
    
                      <div class="govuk-button-group">
    
                        <button type="submit" class="govuk-button govuk-button govuk-!-margin-bottom-0 dpr-apply-columns-button" data-module="govuk-button">
                          Apply Columns
                        </button>
    
                        <a class="govuk-link govuk-link--no-visited-state dpr-reset-columns-button" href="#">Reset columns</a>
                      </div>
                    </form>
    
                  </div>
                </details>
    
              </div>
            </div>
    
          </div>
    
          <div class="dpr-report-totals">
            <p class="govuk-body">0-3 of 100</p>
          </div>
    
          <div class='dpr-table-container'>
    
            <div id="table-container" class='dpr-table-container' data-dpr-module="data-table">
              <div class="dpr-overflow-gradient" id="dpr-overflow-gradient"></div>
              <div class="dpr-table-wrapper" id="dpr-table-wrapper">
                <table class="govuk-table" id="dpr-data-table" data-classification="" data-col-length="3">
    
                  <thead class="govuk-table__head">
                    <tr class="govuk-table__row">
    
                      <th scope="col" class="govuk-table__header">Name</th>
    
                      <th scope="col" class="govuk-table__header">Location</th>
    
                      <th scope="col" class="govuk-table__header govuk-table__header--numeric">Total</th>
    
                    </tr>
                  </thead>
    
                  <tbody class="govuk-table__body">
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell">Aardvark</td>
    
                      <td class="govuk-table__cell">London</td>
    
                      <td class="govuk-table__cell govuk-table__cell--numeric">2</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell">Badger</td>
    
                      <td class="govuk-table__cell">Arctic</td>
    
                      <td class="govuk-table__cell govuk-table__cell--numeric">0</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell">Cat</td>
    
                      <td class="govuk-table__cell">Cheshire</td>
    
                      <td class="govuk-table__cell govuk-table__cell--numeric">2312</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell">Dingo</td>
    
                      <td class="govuk-table__cell">Australia</td>
    
                      <td class="govuk-table__cell govuk-table__cell--numeric">2</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell">Elephant</td>
    
                      <td class="govuk-table__cell">India</td>
    
                      <td class="govuk-table__cell govuk-table__cell--numeric">534</td>
    
                    </tr>
    
                    <tr class="govuk-table__row">
    
                      <td class="govuk-table__cell">Frog</td>
    
                      <td class="govuk-table__cell">China</td>
    
                      <td class="govuk-table__cell govuk-table__cell--numeric">284</td>
    
                    </tr>
    
                  </tbody>
                </table>
    
              </div>
            </div>
    
          </div>
    
          <div class='govuk-!-margin-bottom-6'>
    
            <div class="dpr-report-totals">
              <p class="govuk-body">0-3 of 100</p>
            </div>
    
          </div>
    
          <div class="dpr-pagination">
            <div class="govuk-grid-column-three-quarters govuk-!-padding-left-0">
              <nav class="govuk-pagination" aria-label="Pagination">
    
                <div class="govuk-pagination__prev">
                  <a class="govuk-link govuk-pagination__link" href="#" rel="prev">
    
                    <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
                      <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
                    </svg>
    
                    <span class="govuk-pagination__link-title">
                      Previous<span class="govuk-visually-hidden"> page</span>
                    </span>
    
                  </a>
                </div>
    
                <ul class="govuk-pagination__list">
    
                  <li class="govuk-pagination__item">
    
                    <a class="govuk-link govuk-pagination__link" href="#" aria-label="Page 1">
                      1
                    </a>
    
                  </li>
    
                  <li class="govuk-pagination__item govuk-pagination__item--current">
    
                    <a class="govuk-link govuk-pagination__link" href="#" aria-label="Page 2" aria-current="page">
                      2
                    </a>
    
                  </li>
    
                  <li class="govuk-pagination__item govuk-pagination__item--ellipses">
    
                    &ctdot;
    
                  </li>
    
                  <li class="govuk-pagination__item">
    
                    <a class="govuk-link govuk-pagination__link" href="#" aria-label="Page 5">
                      5
                    </a>
    
                  </li>
    
                </ul>
    
                <div class="govuk-pagination__next">
                  <a class="govuk-link govuk-pagination__link" href="#" rel="next">
    
                    <span class="govuk-pagination__link-title">
                      Next<span class="govuk-visually-hidden"> page</span>
                    </span>
    
                    <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
                      <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
                    </svg>
    
                  </a>
                </div>
    
              </nav>
    
            </div>
    
            <div class="govuk-grid-column-one-quarter govuk-!-padding-0 data-table-page-size-container">
              <div class="data-table-page-size">
                <div class="govuk-input__wrapper">
                  <form id="pagination-page-size-form" data-dpr-module="pagination">
    
                    <div class="govuk-form-group">
    
                      <select class="govuk-select" id="page-size-select" name="pageSize" aria-label="Page size">
    
                        <option value="10" selected>10</option>
    
                        <option value="20">20</option>
    
                        <option value="">All</option>
    
                      </select>
    
                    </div>
    
                  </form>
                  <div class="govuk-input__suffix drp-pagination-rows-suffix" aria-hidden="true">
                    rows per page
                  </div>
                </div>
              </div>
            </div>
          </div>
    
        </div>
    
      </div>
    </div>
    

    {%- from "dpr/components/report-list/view.njk" import dprReportList -%}
    
    {% set pagination = {
      totalRows: 100,
      currentPage: 2,
      next: "#",
      prev: "#",
      pages: [
        {
          number: 1,
          href: '#',
          current: false
        },
        {
          number: 2,
          href: '#',
          current: true
        },
        {
          ellipsis: true
        },
        {
          number: 5,
          href: '#',
          current: false
        }
      ],
      pageSize: 10,
      sizes: [
        {
          value: 10,
          text: '10'
        },
        {
          value: 20,
          text: '20'
        },
        {
          value: '',
          text: 'All'
        }
      ]
    } %}
    
    {% set filterData = {
      selectedFilters: [
        {
          text: "Radio filter: Two",
          key: '["radio"]',
          value: '["Two"]',
          disabled: false,
          classes: 'interactive-remove-filter-button',
          attributes: {
            'aria-label': 'Selected Filter: Radio filter: Two. Click to clear this filter'
          }
        }
      ],
      filters: [
        {
          text: "Radio filter",
          name: 'field1',
          id: "radio",
          type: "Radio",
          options: [
            { value: "one", text: "One" },
            { value: "two", text: "Two" }
          ],
          value: "two"
        },
        {
          text: 'Select filter',
          name: 'select',
          type: 'Select',
          mandatory: false,
          options: [
            { value: '', text: 'Select your option', disabled: true, selected: true },
            { disabled: false, text: 'None', value: 'no-filter'},
            {value: 'value2.1', text: 'Value 2.1' },
            { value: 'value2.2',text: 'Value 2.2' },
            { value: 'value2.3', text: 'Value 2.3' }
          ]
        },
        {
          text: 'Autocomplete',
          name: 'autocomplete',
          type: 'autocomplete',
          mandatory: false,
          minimumLength: 3,
          options: [
            { value: 'Fezzick', text: 'Fezzick' },
            { value: 'inigo-montoya', text: 'Inigo Montoya' },
            { value: 'Prince Humperdink', text: 'Prince Humperdink' },
            { value: 'PrBu', text: 'Princess Buttercup' },
            { value: 'Westley', text: 'Westley' }
          ]
        },
        {
          mandatory: false,
          name: 'field7',
          options: [
            { text: 'Value 8.1', value: 'value8.1' },
            { text: 'Value 8.2', value: 'value8.2' },
            { text: 'Value 8.3', value: 'value8.3' },
            { text: 'Value 8.4',value: 'value8.4' }
          ],
          text: 'Multiselect',
          type: 'multiselect',
          value: 'value8.2,value8.3',
          values: ['value8.2', 'value8.3']
        },
        {
          text: 'Daterange',
          name: 'daterange',
          type: 'daterange',
          value: {
            start: '2003-02-01',
            end: '2006-05-04'
          },
          min: '2003-02-01',
          max: '2007-05-04'
        },
        {
          text: 'Text',
          name: 'text',
          type: 'text',
          value: null,
          mandatory: true
        }
      ]
    } %}
    
    {% set columns = {
      name: "columns",
      options: [
        {
          text: "Name",
          value: "name"
        }, {
          text: "Location",
          value: "location",
          disabled: true
        }, {
          text: "Total",
          value: "total"
        }
      ],
      text: 'Select report columns',
      value: ["name", "location", "total"]
    } %}
    
    {% set dataTable = {
      head: [
        { text: "Name" }, 
        { text: "Location" }, 
        { text: "Total", format: "numeric" }
      ],
      rows: [
        [
          { text: "Aardvark"}, 
          { text: "London" }, 
          { text: "2", format: "numeric" }
        ],
        [
          { text: "Badger" }, 
          { text: "Arctic" }, 
          { text: "0", format: "numeric" }
        ],
        [
          { text: "Cat" }, 
          { text: "Cheshire" }, 
          { text: "2312", format: "numeric" }
        ],
        [
          { text: "Dingo"}, 
          { text: "Australia" }, 
          { text: "2", format: "numeric" }
        ],
        [
          { text: "Elephant" }, 
          { text: "India" }, 
          { text: "534", format: "numeric" }
        ],
        [
          { text: "Frog" }, 
          { text: "China" }, 
          { text: "284", format: "numeric" }
        ]
      ],
      rowCount: 3,
      colCount: 3
    } %}
    
    {{ dprReportList({
      reportName: 'Example Report',
      name: 'List template',
      description: 'Example of a list template',
      dataTable: dataTable,
      filterData: filterData,
      columns: columns,
      actions: [],
      pagination: pagination,
      template: 'list',
      type: 'report',
      totals: '0-3 of 100',
      reportUrl: 'pathname',
      reportSearch: 'search',
      encodedSearch: 'search',
      count: '100',
      printable: false,
      classification: 'OFFICIAL',
      removeBookmark: true
    }) }}