{% extends 'base.html' %}

{% block body %}
  <style>
    .sans {
      font-family: Candara, Roboto, "Lucida Sans Unicode", "Lucida Grande", Verdana, sans-serif;
      line-height: 1.6;
    }

    .serif {
      font-family: Bookman, Garamond, "Palatino Linotype", "Book Antiqua", Palatino, serif;
      font-size: 1.2rem;
      line-height: 1.6;
    }

    .mono {
      font-family: Monaco, "Courier New", Courier, monospace;
      line-height: 1.6;
    }

    main {
      max-width: 40rem;
      white-space: pre-wrap;
      margin: 0 0 3rem;
    }
  </style>

  <nav>
    <a href='{% url "index" %}' title='Home'>Home</a>
    <a href='{{ text_file.get_edit_url }}' title='Edit'>Edit</a>

    <label for='font-select'>Font:</label>

    <select id='font-select'>
      <option value='sans' {% if font == 'sans' %}selected{% endif %}>Sans</option>
      <option value='serif' {% if font == 'serif' %}selected{% endif %}>Serif</option>
      <option value='mono' {% if font == 'mono' %}selected{% endif %}>Mono</option>
    </select>
  </nav>

  <script type='text/javascript'>
    function updateQueryParameter(key, value) {
      if(window.location.search === '') {
        window.location.search = '?' + key + '=' + value;
        return;
      }

      var queryParameters = window.location.search.substring(1).split('&').map(function(kvp) {
        return kvp.split('=');
      });

      queryParameters.forEach(function(kvp) {
        if(kvp[0] === key) {
          kvp[1] = value;
        }
      });

      window.location.search = '?' + queryParameters.map(function(kvp) {
        return kvp.join('=');
      }).join('&');
    }

    (function(fn) {
      if (document.readyState != 'loading'){
        fn();
      } else {
        document.addEventListener('DOMContentLoaded', fn);
      }
    })(function() {
      var main = document.querySelector('main');
      var fontSelect = document.querySelector('#font-select');

      fontSelect.addEventListener('change', function(e) {
        updateQueryParameter('font', e.target.value);

        main.classList.add(e.target.value);

        ['mono', 'sans', 'serif'].forEach(function(c) {
          if(c != e.target.value) main.classList.remove(c);
        });
      });
    });
  </script>

  <main class='{{ font }}'>{{ text }}</main>

{% endblock %}