{% extends 'templates/layouts/page.njk' %}

{% set pageProps = {
  h1: 'Text Options'
} %}

{% set pageConfig = {
  useSidebarAfter: false
} %}

{% block content %}
  {% from 'components/rte/rte.njk' import RTE %}

  {% call ContentSection() %}
    {% call RTE() %}
      <p><strong>Normal body text:</strong> Body text with normal formatting, optionally also in <strong>bold.</strong>
      </p>
      <p>By default, the underline option is not available as it is reserved for links .</p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection() %}
    {% call RTE() %}
      <p><strong>Links in the running text:</strong></p>
      <ul>
        <li>Link to an <a href="#" target="_blank" rel="noopener noreferrer">external page</a></li>
        <li>Link to an <a href="#">internal page</a></li>
        <li>Link to an <a href="mailto:test@test.com">email</a> address</li>
        <li>Link to an <a href="#" target="_blank" rel="noopener noreferrer">external URL</a></li>
        <li>Link to an <a href="#">file</a></li>
      </ul>
    {% endcall %}
  {% endcall %}

  {% call ContentSection() %}
    {% call RTE() %}
      <p><strong>Links in the running text:</strong></p>
      <p><a href="mailto:test@test.com" class="rte-link rte-link--email">Email</a></p>
      <p><a href="tel:+11232341" class="rte-link rte-link--phone">Phone</a></p>
      <p><a href="tel:+11232341" class="rte-link rte-link--mobile">Mobile</a></p>
      <p>
        <a href="#" class="rte-link rte-link--website" target="_blank" rel="noopener noreferrer">
          Link to external website
        </a>
      </p>
      <p><a href="#" class="rte-link rte-link--download" download>Download</a></p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection() %}
    {% call RTE() %}
      <p><strong>Highlighted links:</strong></p>
      <p><a href="#" class="button button--primary-outline button--lg">On one side</a></p>
      <p><a href="#" class="button button--primary button--lg">To perform action</a></p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection() %}
    {% call RTE() %}
      <p>Special characters are also possible: @ © ½ Ø m 2 x 2 ...</p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection() %}
    {% call RTE() %}
      <p>
        Foreign-language texts , even mixed on one page, are not a problem (of course, the respective font must be
        available on the computer, so the next lines may be displayed with boxes or question marks):
        <br>
        <br>
        Cyrillic: Русская версия<br>
        Chinese: 中文版<br>
        Arabic: الْعَرَبيّة
      </p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection() %}
    {% call RTE() %}
      <p class="text-center">Texts can be centered</p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection() %}
    {% call RTE() %}
      <p class="text-right">right-justified alignment is also possible</p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection() %}
    {% call RTE() %}
      <p class="text-justify">All functions in the editor can be configured individually, an individual adjustment to
                              the needs of the editors is possible.</p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection() %}
    {% call RTE() %}
      <p><strong>Scoreboards:</strong></p>
      <p>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla
         blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam facilisis lacus ut
         arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam
         ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet di</p>
      <ul>
        <li>
          Donec sed eraretium laoreet di
          <ul>
            <li>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium
                fringilla blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam
                facilisis lacus ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius
                risus tristique a. Etiam ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium
                laoreet di
            </li>
            <li>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium
                fringilla blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam
                facilisis lacus udi
            </li>
          </ul>
        </li>
        <li>Donec sed erat ut magna suscipit mattis. Aliquam erat</li>
      </ul>
      <p>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla
         blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam facilisis lacus ut
         arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam
         ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet di</p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection() %}
    {% call RTE() %}
      <p><strong>Numbered lists:</strong></p>
      <p>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla
         blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam facilisis lacus ut
         arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam
         ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet di</p>
      <ol>
        <li>
          Donec sed erat ut magna suscipit
          <ol>
            <li>Donec sed erat ut magna suscipit</li>
            <li>Donec sed erat ut magna suscipit</li>
            <li>Donec sed erat ut magna suscipit</li>
          </ol>
        </li>
        <li>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla
            blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam facilisis lacus
            ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a.
            Etiam ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet di
        </li>
        <li>Donec sed erat ut magnpretium laoreet di</li>
        <li>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla
            blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam fa
        </li>
        <li>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla
            blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam facilisis lacus
            ut arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a.
            Etiam ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet di
        </li>
        <li>Donec sed</li>
        <li>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla
            blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam fa
        </li>
        <li>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla
            blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam fa
        </li>
        <li>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla
            blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam fa
        </li>
        <li>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla
            blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam fa
        </li>
      </ol>
      <p>Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla
         blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Etiam facilisis lacus ut
         arcu vulputate, non pellentesque sem convallis. Proin tempus sapien nisl, nec varius risus tristique a. Etiam
         ligula lacus, ultricies at cursus id, fringilla nec nulla. Fusce pretium laoreet di</p>
    {% endcall %}
  {% endcall %}

  {% call ContentSection() %}
    {% call RTE() %}
      <blockquote>
        Donec sed erat ut magna suscipit mattis. Aliquam erat volutpat. Morbi in orci risus. Donec pretium fringilla
        blandit. Etiam ut accumsan leo. Aliquam id mi quam. Vivamus dictum ut erat nec congue. Eti
      </blockquote>
    {% endcall %}
  {% endcall %}
{% endblock %}