<!DOCTYPE html>
<html lang="en" class="no-js">
{% include head %}
{% if site.banner.text %}
  <body class="banner-displayed">
{% else %}
  <body>
{% endif %}
  {% include menu %}
  <main class="doc">
    <article class="container">
      {% if ad == "text" %}
        {% include text-ad %}
      {% else %}
        <div class="eslint-ad-float hidden-xs hidden-sm">
          {% include ad %}
        </div>
      {% endif %}
      
      {% comment %}Versioned pages didn't have title in front matter{% endcomment %}
      {% assign versioned =  page.url | regexMatch: "\/docs/\d" %}
      {% unless versioned %}
      <h1>{{ title }}</h1>
      {% endunless %}

      {% assign all_content = content
        | replace: '<p>Examples of <strong>incorrect</strong> code', '<p class="incorrect icon">Examples of <strong>incorrect</strong> code'
        | replace: '<p>Example of <strong>incorrect</strong> code', '<p class="incorrect icon">Example of <strong>incorrect</strong> code'
        | replace: '<p>Examples of additional <strong>incorrect</strong> code', '<p class="incorrect icon">Examples of additional <strong>incorrect</strong> code'
        | replace: '<p>Example of additional <strong>incorrect</strong> code', '<p class="incorrect icon">Example of additional <strong>incorrect</strong> code'
        | replace: '<p>Examples of <strong>correct</strong> code', '<p class="correct icon">Examples of <strong>correct</strong> code'
        | replace: '<p>Example of <strong>correct</strong> code', '<p class="correct icon">Example of <strong>correct</strong> code'
        | replace: '<p>Examples of additional <strong>correct</strong> code', '<p class="correct icon">Examples of additional <strong>correct</strong> code'
        | replace: '<p>Example of additional <strong>correct</strong> code', '<p class="correct icon">Example of additional <strong>correct</strong> code'
        | replace: '<p>(recommended) ', '<p class="recommended icon">'
        | replace: '<p>(removed) ', '<p class="removed icon">'
        | replace: '<p>(fixable) ', '<p class="fixable icon">'
        | replace: '<p>(hasSuggestions) ', '<p class="hasSuggestions icon">'
        | replace: '(recommended)', '<span title="recommended" aria-label="recommended">✓</span>'
        | replace: '(fixable)', '<span title="fixable" aria-label="fixable">🔧</span>'
        | replace: '(hasSuggestions)', '<span title="hasSuggestions" aria-label="hasSuggestions">💡</span>'
      %}

      {% if related_rules %}
        {% capture related_rules_content %}
        <h2 id="related-rules">Related Rules</h2>
        <ul>
          {% for rule_id in related_rules %}
          <li><a href="{{ rule_id }}">{{ rule_id }}</a></li>
          {% endfor %}
        </ul>
        <h2 id="version">Version</h2>
        {% endcapture %}
        {% assign all_content = all_content | replace: '<h2 id="version">Version</h2>', related_rules_content %}
      {% endif %}

      {% if further_reading %}
        {% capture further_reading_content %}
        <h2 id="further-reading">Further Reading</h2>
        <ul>
          {% for url in further_reading %}
          <li><a href="{{ url }}">{{ url }}</a></li>
          {% endfor %}
        </ul>
        <h2 id="version">Version</h2>

        {% endcapture %}
        {% assign all_content = all_content | replace: '<h2 id="version">Version</h2>', further_reading_content %}
      {% endif %}

      {{ all_content }}

    </article>
  </main>
  {% include footer %}
</body>
</html>
