{% extends 'base.html.jinja' %}
{% import 'epijats/lyon.html.jinja' as style %}

{% block head_content %}
{{super()-}}
{% if embed_web_fonts %}
{{style.link_fonts()}}
{% endif %}
  <title>{{ doc.title }}</title>
  <style>
    html {
      font-size: 12px;
    }
  </style>
  <link href="static/printstrap.css" rel="stylesheet">
  {{- style.article_main_css_style() }}
  <style>
    .page-content-pillar {
      margin: 0 auto;
    }
    @media screen {
      .page-content-pillar {
        max-width: calc(74 * var(--ps-base-font-size));
      }
    }

    /* styling of UI controls to switch to webpaper mode */
    html.webpaper {
      background-color: #def;
    }
    nav.preview-mode {
      display: none;
      font-family: system-ui;
    }
    @media screen {
      body {
        margin-top: 64px;
        margin-bottom: 0;
      }
      nav.preview-mode {
        display: flex;
        position: absolute;
        top: -54px;
        font-size: 16px;
      }
      nav.preview-mode button,
      nav.preview-mode a {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 28px;
        height: 40px;
      }
      nav.preview-mode a.pdf-link img {
        height: 40px;
      }
      nav.preview-mode .btn-switch,
      nav.preview-mode .btn-issues {
        color: initial;
        background-color: #f5f5f5;
        border: #ff2116 solid 1px;
        border-radius: 5px;
        font-size: 16px;
      }
      nav.preview-mode .btn-switch {
        font-family: system-ui;
        width: 198px;
        padding: 0;
      }
      nav.preview-mode .btn-issues {
        width: 128px;
      }
    }
  </style>
  <script>
    let params = new URLSearchParams(document.location.search);
    if (params.has("webpaper")) {
      document.documentElement.classList.add('webpaper');
    }
  </script>
{% endblock head_content %}

{% block body_content %}
{% set args = {'dsi_domain': dsi_domain, 'header_banner_msg': header_banner_msg} %}
<div class="page-content-pillar">
  <div class="eprint">

    <nav class="preview-mode">
      {% if link_issues %}
      <a class="btn-issues" href="issues/" target="issues">Issues</a>
      {% endif %}
      <button class="btn-switch webpaper-none" onclick="window.location.search = '?webpaper';">
        Switch to webpaper
      </button>
      <button class="btn-switch webpaper-only" onclick="window.location.search = '';">
        Switch to print preview
      </button>
      {% if show_pdf_icon %}
      <a class="pdf-link" href="article.pdf"><img src="static/PDF_file_icon.svg"></a>
      {% endif %}
    </nav>

    {{- style.article_layout(doc, args) }}

  </div><!-- eprint -->
</div><!-- page-content-pillar -->
{% endblock body_content %}
