<!DOCTYPE html>
<html lang="{{catalog.lang}}">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>{{title}}</title>
  <script type="text/javascript" charset="utf8" src="uswds/js/uswds-init.min.js"></script>
  <link rel="stylesheet" href="uswds/css/uswds.min.css">
  <link rel="stylesheet" href="openacr.css">
  <link rel="stylesheet" href="custom.css">
</head>
<body>
  <script type="text/javascript" charset="utf8" src="uswds/js/uswds.min.js"></script>
  <main>
    <div class="grid-container">
      <h1><span class="evaluation-title">{{title}}</span> Accessibility Conformance Report</h1>

      <div class="catalog-section">Based on {{catalog.title}}</div>

      <div class="product-section">
        {{headerWithAnchor "Name of Product/Version" "name-of-product-version" 2}}
        {{product.name}}{{#if product.version}} {{product.version}}{{/if}}
      </div>

      <div class="report-dates-ver-section">
        {{headerWithAnchor "Report Dates and Version" "report-date" 2}}
        <ul>
          <li>Report Date: {{report_date}}</li>
          <li>Last Modified Date: {{last_modified_date}}</li>
          <li>Version: {{reportFilename}}</li>
        </ul>
      </div>

      {{#if product.description}}
        <div class="description-section">
          {{headerWithAnchor "Product Description" "product-description" 2}}
          {{sanitizeMarkdown product.description}}
        </div>
      {{/if}}

      <div id="contact-section">
        {{headerWithAnchor "Contact Information" "contact-information" 2}}
        {{#if author}}
          <div class="author-section">
            {{headerWithAnchor "Author Information" "author" 3}}
            <ul>
              {{#if author.name}}<li>Name: {{author.name}}</li>{{/if}}
              {{#if author.company_name}}<li>Company: {{author.company_name}}</li>{{/if}}
              {{#if author.address}}<li>Address: {{author.address}}</li>{{/if}}
              {{#if author.email}}<li>Email: <a href="mailto:{{author.email}}">{{author.email}}</a></li>{{/if}}
              {{#if author.phone}}<li>Phone: {{author.phone}}</li>{{/if}}
              {{#if author.website}}<li>Website: <a href="{{author.website}}">{{author.website}}</a></li>{{/if}}
            </ul>
          </div>
        {{/if}}
        {{#if vendor}}
          <div class="vendor-section">
            {{headerWithAnchor "Vendor Information" "vendor" 3}}
            <ul>
            {{#if vendor.name}}<li>Name: {{vendor.name}}</li>{{/if}}
            {{#if vendor.company_name}}<li>Company: {{vendor.company_name}}</li>{{/if}}
            {{#if vendor.address}}<li>Address: {{vendor.address}}</li>{{/if}}
            {{#if vendor.email}}<li>Email: <a href="mailto:{{vendor.email}}">{{vendor.email}}</a></li>{{/if}}
            {{#if vendor.phone}}<li>Phone: {{vendor.phone}}</li>{{/if}}
            {{#if vendor.website}}<li>Website: <a href="{{vendor.website}}">{{vendor.website}}</a></li>{{/if}}
            </ul>
          </div>
        {{/if}}
      </div>

      {{#if notes}}
        <div class="notes-section">
          {{headerWithAnchor "Notes" "notes" 2}}
          {{sanitizeMarkdown notes}}
        </div>
      {{/if}}

      {{#if evaluation_methods_used}}
        <div class="eval-section">
          {{headerWithAnchor "Evaluation Methods" "evaluation-methods" 2}}
          {{sanitizeMarkdown evaluation_methods_used}}
        </div>
      {{/if}}

      <div class="standards-section">
        {{headerWithAnchor "Applicable Standards/Guidelines" "applicable-standards-guidelines" 2}}

        <table class="usa-table applicable-standards-guidelines-table">
          <caption>This report covers the degree of conformance for the following accessibility standard/guidelines:</caption>
          <thead>
            <tr>
              <th>Standard/Guideline</th>
              <th>Included In Report</th>
            </tr>
          </thead>
          <tbody>
            {{#each catalog.standards as |catalog-standard|}}
              <tr>
                <td><a href="{{catalog-standard.url}}" target="_blank">{{catalog-standard.label}}<span class="usa-sr-only"> (opens in a new window or tab)</span></a></td>
                <td>{{standardsIncluded catalog-standard.chapters}}</td>
              </tr>
            {{/each}}
          </tbody>
        </table>
      </div>

      <div class="terms-section">
        {{headerWithAnchor "Terms" "terms" 2}}
        The terms used in the Conformance Level information are defined as follows:
        <ul>
          {{#each catalog.terms as |catalog-term|}}
            <li><strong>{{catalog-term.label}}</strong>: {{catalog-term.description}}</li>
          {{/each}}
        </ul>
      </div>

      {{#each catalog.standards as |catalog-standard|}}
        {{headerWithAnchor catalog-standard.report_heading catalog-standard.id 2}}
        {{#each catalog-standard.chapters as |catalog-standard-chapter|}}
          {{#with (catalogChapter catalog-standard-chapter) as |catalog-chapter|}}
            {{#with (lookup ../../../chapters catalog-chapter.id) as |data-category|}}

              {{#unless data-category.disabled}}
                {{headerWithAnchor catalog-chapter.label catalog-chapter.id 3}}
              {{else}}
                {{#if data-category.notes}}
                  {{headerWithAnchor catalog-chapter.label catalog-chapter.id 3}}
                {{/if}}
              {{/unless}}

              {{#if data-category.notes}}
                <div id="{{catalog-chapter.id}}-notes" class="chapter-notes-section">
                  Notes: {{sanitizeMarkdown data-category.notes}}
                </div>
              {{/if}}

              {{#unless data-category.disabled}}
              {{#if data-category.criteria}}
                <div id="{{catalog-chapter.id}}-summary">
                  <table class="usa-table">
                    <caption>
                      Conformance to the {{data-category.criteria.length}} criteria listed below is distributed within each category as follows:
                    </caption>
                    {{progressPerChapter data-category.criteria}}
                  </table>
                </div>

                <table class="usa-table">
                  <thead>
                  <tr>
                    <th>Criteria</th>
                    <th>Conformance Level</th>
                    <th>Remarks and Explanations</th>
                  </tr>
                  </thead>
                  <tbody>
                    {{#each data-category.criteria as |data-criteria|}}
                      <tr id="{{data-criteria.num}}">
                        <td>
                          <a href="{{catalogCriteriaURL catalog-chapter.id data-criteria.num catalog-standard.url}}" target="_blank">
                            {{data-criteria.num}} {{catalogCriteriaLabel catalog-chapter.id data-criteria.num}}<span class="usa-sr-only"> (opens in a new window or tab)</span>
                          </a>
                        </td>
                        <td>
                          {{#if data-criteria.components}}
                            <ul class="component-level-count-{{levelCount data-criteria.components}}">
                              {{#each data-criteria.components as |data-components|}}
                                {{#if data-components.adherence.level}}
                                  <li><span class="component-level-label">{{catalogComponentLabel data-components.name}}</span><p>{{levelLabel data-components.adherence.level}}</p></li>
                                {{/if}}
                              {{/each}}
                            </ul>
                          {{/if}}
                        </td>
                        <td>
                          {{#if data-criteria.components}}
                            <ul class="component-level-count-{{levelCount data-criteria.components}}">
                              {{#each data-criteria.components as |data-components|}}
                                {{#if data-components.adherence.notes}}
                                  <li><span class="component-level-label">{{catalogComponentLabel data-components.name}}</span>{{sanitizeMarkdown data-components.adherence.notes}}</li>
                                {{/if}}
                              {{/each}}
                            </ul>
                          {{/if}}
                        </td>
                      </tr>
                    {{/each}}
                  </tbody>
                </table>

              {{/if}}
              {{/unless}}
            {{/with}}
          {{/with}}
        {{/each}}
      {{/each}}
      {{#if legal_disclaimer}}
        {{headerWithAnchor (concat "Legal Disclaimer" vendor.company_name) "legal-disclaimer" 2}}
        {{sanitizeMarkdown legal_disclaimer}}
      {{/if}}
      {{#if repository}}
        {{headerWithAnchor "Repository" "repository" 2}}
        <a href="{{repository}}">{{repository}}</a>
      {{/if}}
      {{#if feedback}}
        {{headerWithAnchor "Feedback" "feedback" 2}}
        <a href="{{feedback}}">{{feedback}}</a>
      {{/if}}

      {{#if related_openacrs}}
        {{headerWithAnchor "Related OpenACRs" "related-openacrs" 2}}
        <ul>
          {{#each related_openacrs as |related-openacr|}}
            <li><a href="{{related-openacr.url}}">{{related-openacr.url}} ({{related-openacr.type}})</a></li>
          {{/each}}
        </ul>
      {{/if}}
    </div>
  </main>
  <footer class="usa-footer usa-footer usa-footer--slim">
    <div class="usa-footer__return-to-top">
      <div class="grid-container">
        <a href="#">Return to top</a>
      </div>
    </div>
    <div class="usa-footer__secondary-section">
      <div class="grid-container">
        <div class="grid-row grid-gap">
          <div class="grid-col">
            <a href="https://github.com/GSA/openacr" target="_blank">OpenACR<span class="usa-sr-only"> (opens in a new window or tab)</span></a> is a format maintained by the <a href="https://gsa.gov/" target="_blank">GSA<span class="usa-sr-only"> (opens in a new window or tab)</span></a>. The content is the responsibility of the author.
          </div>
          <div class="grid-col">
            This content is licensed under a {{license}}.
          </div>
        </div>
      </div>
    </div>
  </footer>
</body>
</html>
