{% extends 'epijats/_common.html.jinja' %}

{% macro article_preview(doc, dsi_base_url) %}
  <div class="eprint">
    {{- article_layout(doc, dsi_base_url) }}
  </div><!-- eprint -->
{% endmacro %}

{% macro article_layout(doc, dsi_base_url, website_hooks=none) %}
  <header>
    <div class="page-left">
    {% if doc.dsi %}
      <div class="article-dsi">
        <a href="{{ dsi_base_url }}/{{ doc.dsi }}">
          <span class="logotype">perm.pub/</span><strong>dsi:</strong><code>{{ doc.dsi }}</code>
        </a>
        <div class="online-msg">Additional formats and editions available online.</div>
      </div>
    {% endif %}
    </div>
    <div class="page-center"></div>
    <div class="page-right">
      <img class="logo logo-cc" src="static/cc.svg">
    </div>
  </header>

  <footer>
    <div class="page-left"></div>
    <div class="page-center"></div>
    <div class="page-right">0 of 0</div>
  </footer>

  <header>
    <div class="page-left"></div>
    <div class="page-center"></div>
    <div class="page-right"></div>
  </header>

  <article lang="en">

    <div class="top-metadata">
      <div class="article-dsi">
        <a href="{{ dsi_base_url }}/{{ doc.dsi }}">
          <strong>dsi:</strong><code>{{ doc.dsi }}</code>
        </a>
      </div>
      {{edition_band(doc)}}
      {{article_dates(doc)}}
      <div class="article-swhid">
        <b>Archived baseprint:</b><br>
        <a href="{{ swh_archive_url}}{{ doc.hash_scheme }}{{ doc.hexhash }}">
          <strong>{{ doc.hash_scheme }}</strong><code>{{ doc.hexhash }}</code>
        </a>
      </div>
    </div>

    <main>

      <h1 class="title">{{ doc.title or "No Title" }}</h1>

      {{ contributors_list(doc.contributors, show_email=not website_hooks) }}

      {% if website_hooks %}
        {{ website_hooks.correspond() }}
        {{ website_hooks.cite() }}
      {% endif %}

      <section class="abstract">
        {% if doc.abstract %}
          <h2>Abstract</h2>
          {{ doc.abstract }}
        {% endif %}
      </section>

      <div class="article-body">
        {% if doc.body %}
          {{ doc.body }}
        {% endif %}
      </div>

      <div class="article-footer">
        {{- copyright(doc) }}
      </div>

    </main>
  </article>
{% endmacro %}


{# article_css_style is used to generated standalone HTML page and eprint PDF #}
{% macro article_css_style() %}
  <style>
    html {
      font-size: 15px;
    }
  </style>
  <link href="static/printstrap.css" rel="stylesheet">
  {{- article_main_css_style() }}
{% endmacro %}


{# article_main_css_style is used by popgen.es website #}
{% macro article_main_css_style() %}
  {{- common_css() }}
  {{- pandoc_class_css() }}
  {{- var_base_font_css() -}}
  <style>
    :root {
      --eprint-font-sans: 'Fira Sans', sans-serif;
      --eprint-font-mono: 'Fira Mono', monospace;
      --eprint-font-condensed: 'Fira Sans Condensed', sans-serif;
    }
    .webpaper .eprint {
      font-size: var(--base-font-size);
    }
    .eprint {
      --main-color: #04b;
      --text-color: black;
      --light-text-color: #555;
      --accent-color: #a6ce39;
    }


    /* Page */

    :root {
      --ps-page-margin-left: 25mm;
      --ps-page-margin-right: 25mm;
      --ps-page-area-width: 160mm;
      /* 25mm + 160mm + 25mm = 210mm = A4 paper width */

      --ps-first-page-margin-top: 38mm;

      --ps-first-page-top-left-width: 90%;
      --ps-first-page-top-center-width: 0%;
      --ps-first-page-top-right-width: 10%;
    }
    .eprint {
      color: var(--text-color);
      font-family: var(--eprint-font-sans);
      font-weight: 300;
      line-height: 1.2;
    }
    .eprint footer .page-right {
      content: counter(page) " of " counter(pages);
    }


    /* Article */

    article {
      line-height: 1.4;
      hyphens: manual;
      overflow-wrap: normal;
    }


    /* Titles */

    article h1, article h2, article h3, article h4 {
      font-weight: 300;
      line-height: 1;
      margin: 1.4em 0 0.6em 0;
    }
    article h1 {
      font-size: 2.6em;
      letter-spacing: -0.03em;
    }
    article h1.title {
      margin-top: 2em;
    }
    article h1.title::after {
      border-bottom: 0.375rem solid;
      border-color: var(--accent-color);
      content: "";
      display: block;
      height: 0;
      margin: 0.5em 0;
      width: 2em;
    }
    article h2 {
      font-size: 1.8em;
      letter-spacing: -0.02em;
    }
    article h3 {
      font-size: 1.45em;
    }
    article h4 {
      font-size: 1.25em;
    }


    /* Specific Structure Blocks */

    @media screen {
      .webpaper .eprint :is(header, footer) {
        display: none;
      }
    }

    article .top-metadata {
      margin-top: 3em;
    }
    .webpaper article .top-metadata {
      margin-top: 0.825rem;
    }
    article .top-metadata .article-dsi {
      display: none;
    }
    .webpaper article .top-metadata .article-dsi {
      display: block;
    }

    article main {
      padding-bottom: 2rem;
    }

    article .article-footer {
      border-top: 0.005in solid;
      break-inside: avoid;
      color: var(--light-text-color);
      font-weight: 300;
      margin-top: 3em;
      padding-top: 1em;
    }
    article .article-footer p {
      margin: 0;
    }


    /* Specific Elements */

    .eprint header .logotype {
      font-size: 1.5em;
      font-weight: bold;
      color: var(--accent-color);
    }
    .eprint .article-dsi {
      font-size: 1.2em;
    }
    .eprint header .online-msg {
      color: var(--light-text-color);
      font-size: 1.25rem;
      font-weight: 300;
    }
    .eprint .article-dsi,
    .eprint .article-swhid {
      word-break: break-all;
    }
    .eprint .article-dsi code,
    .eprint .article-swhid code {
      margin-left: 0.125em;
    }
    .eprint .article-swhid code {
      font-size: 0.825em;
    }

    article .edition-band {
      margin: 0.825rem 0;
    }
    article .edition-number {
      display: inline-block;
      font-size: 1.75em;
      font-weight: 300;
      margin-right: 2rem;
    }
    article .edition-obsolete {
      display: inline-block;
      font-size: 1.5rem;
      color: #ff2116;
    }
    article .edition-obsolete svg {
      vertical-align: baseline;
      margin-bottom: -0.125rem;
    }

    article dl.article-dates {
      margin-bottom: 0.5rem;
    }
    article dl.article-dates dt::after {
      content: ": ";
    }
    article dl.article-dates dt {
      display: inline-block;
      font-weight: bold;
      padding-bottom: 0.5em;
      min-width: 6.25rem;
    }
    article dl.article-dates dd {
      display: inline;
      margin: 0;
    }
    article dl.article-dates dd::after {
      content: '\A';
      white-space: pre-line;
    }

    article dl.contributors {
      margin-bottom: 3rem;
    }
    article .contributors dt, article .contributors dd {
      display: inline;
      margin: 0;
    }
    article .contributors dt:has(+ dt)::after {
      content: ",";
    }
    article .contributors dd::before {
      content: "(";
    }
    article .contributors dd::after {
      content: "),";
    }
    article .contributors dd:last-child::after {
      content: ")";
    }
    article .abstract {
      border-bottom: 0.005in solid;
      padding-bottom: 0.5em;
      margin-bottom: 4em;
    }
    article main p {
      hyphens: auto;
      hyphenate-limit-chars: 9 3;
      text-align: justify;
    }
    article .katex {
      break-before: avoid;
    }
    article .orcid-icon::before {
      background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjU2IDI1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNBNkNFMzk7fQoJLnN0MXtmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjU2LDEyOGMwLDcwLjctNTcuMywxMjgtMTI4LDEyOEM1Ny4zLDI1NiwwLDE5OC43LDAsMTI4QzAsNTcuMyw1Ny4zLDAsMTI4LDBDMTk4LjcsMCwyNTYsNTcuMywyNTYsMTI4eiIvPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik04Ni4zLDE4Ni4ySDcwLjlWNzkuMWgxNS40djQ4LjRWMTg2LjJ6Ii8+Cgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTA4LjksNzkuMWg0MS42YzM5LjYsMCw1NywyOC4zLDU3LDUzLjZjMCwyNy41LTIxLjUsNTMuNi01Ni44LDUzLjZoLTQxLjhWNzkuMXogTTEyNC4zLDE3Mi40aDI0LjUgICBjMzQuOSwwLDQyLjktMjYuNSw0Mi45LTM5LjdjMC0yMS41LTEzLjctMzkuNy00My43LTM5LjdoLTIzLjdWMTcyLjR6Ii8+Cgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNODguNyw1Ni44YzAsNS41LTQuNSwxMC4xLTEwLjEsMTAuMWMtNS42LDAtMTAuMS00LjYtMTAuMS0xMC4xYzAtNS42LDQuNS0xMC4xLDEwLjEtMTAuMSAgIEM4NC4yLDQ2LjcsODguNyw1MS4zLDg4LjcsNTYuOHoiLz4KPC9nPgo8L3N2Zz4=") no-repeat;
      content: "";
      display: inline-block;
      height: 1em;
      vertical-align: -10%;
      width: 1em;
    }
  </style>
{% endmacro %}
