{%- if request.url_rule.endpoint == 'create_issue' %}
  <h1 class="headline-1">Report Site Issue</h1>
{%- endif %}

<form
  action="/issues/new"
  class="form grid-row js-loader loader issue-form"
  enctype="multipart/form-data"
  method="post"
  novalidate
>
  <h3 class="page-heading">Filing a web compatibility issue</h3>

  {% include "steps/url.html" %}
  {% include "steps/category.html" %}
  {% include "steps/sub-category.html" %}
  {% include "steps/confirm-browser.html" %}
  {% include "steps/different-browser.html" %}
  {% include "steps/tested-browsers.html" %}
  {% include "steps/warning-browser.html" %}
  {% include "steps/description.html" %}
  {% include "steps/screenshot.html" %}
  {% include "steps/submit.html" %}

  {{ form.hidden_tag() }}
</form>

<div class="popup-overlay popup-modal__close"></div>

<div
  class="popup-modal shadow"
  data-popup-modal="what-is-compat">
  <img class="close popup-modal__close" src="{{ url_for('static', filename='img/svg/icons/svg-cross-black.svg') }}" title="Close popup" alt="Close popup" />
  <div class="slider">
    <div class="slides">
      <div class="slide active">
        <div class="title mobile-only">What is a web compatibility issue?</div>
        <div class="row full-height mobile-col">
          <div class="text-half col">
            <div class="title desktop-only">What is a web compatibility issue?</div>
            <div class="text">A web compatibility issue occurs <strong>when a website behaves differently across browsers.</strong> Sometimes a website will load on one browser and crash or render in a strange way on another. </div>
          </div>
          <div class="image-half">
            <img class="" src="{{ url_for('static', filename='img/svg/help-step-1.svg') }}" title="What is a web compatibility issue" alt="What is a web compatibility issue" />
          </div>
        </div>
      </div>
      <div class="slide">
        <div class="title mobile-only">What causes a web compatibility issue?</div>
        <div class="row full-height mobile-col">
          <div class="text-half col">
            <div class="title desktop-only">What causes a web compatibility issue?</div>
            <div class="text">Sometimes websites have bugs that prevent them from working in all browsers. Browsers also have different ways of implementing features that may affect a site’s usability. </div>
          </div>
          <div class="image-half">
            <img class="" src="{{ url_for('static', filename='img/svg/help-step-2.svg') }}" title="What is a web compatibility issue" alt="What is a web compatibility issue" />
          </div>
        </div>
      </div>
      <div class="slide">
        <div class="row full-height mobile-col">
          <div class="text-half col">
            <div class="title desktop-only">What is a web compatibility issue?</div>
            <div class="text"><strong>We want to make sure the Internet works for everyone.</strong> Together with web developers and site owners, we help identify and fix web compatibility issues. Let us know if you find a website behaves differently across browsers. </div>
          </div>
          <div class="image-half image-only">
            <img class="" src="{{ url_for('static', filename='img/svg/help-step-3.svg') }}" title="What is a web compatibility issue" alt="What is a web compatibility issue" />
          </div>
        </div>
      </div>
    </div>
    <div class="controls">
      <div class="row">
        <div class="dot active" data-slide="0"></div>
        <div class="dot" data-slide="1"></div>
        <div class="dot" data-slide="2"></div>
      </div>
      <button class="btn next">Next</button>
      <button class="btn close-control popup-modal__close">Got it</button>
    </div>
  </div>
</div>

<div
  class="popup-modal shadow text"
  data-popup-modal="privacy-modal">
  <img class="close popup-modal__close" src="{{ url_for('static', filename='img/svg/icons/svg-cross-black.svg') }}" title="Close popup" alt="Close popup" />
  <div class="popup-text">
    <h2>Public Reports</h2>
    All reports are publicly accessible. <strong>Please do not include any confidential or personal information</strong> in the content of your report.
    <br><br>
    If you choose to upload a screenshot or other image, it will be publicly accessible. Please <strong>do not include any confidential or personal information</strong> in the screenshot.
  </div>
  <div class="links">
    <a href="/privacy" target="_blank">Privacy policy</a>
  </div>
</div>