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


{% macro article_layout(doc, dsi_base_url, website_hooks=none) %}
  <article lang="en" class="eprint">
    <header>
      <div class="page-right">
        {% if doc.dsi %}
          <p class="article-dsi">
            <a href="{{ dsi_base_url }}/{{ doc.dsi }}">
              <strong>dsi:</strong><code>{{ doc.dsi }}</code>
            </a>
          </p>
        {% endif %}
        <p class="online-msg">Additional formats and editions available online.</p>
      </div>
    </header>

    <div class="top-metadata">
      {{edition_band(doc)}}
      {{article_dates(doc)}}
    </div>

    <footer>
      <div class="article-swhid page-left">
        <b>Archived baseprint:</b>
        <a href="{{ swh_archive_url}}{{ doc.hash_scheme }}{{ doc.hexhash }}">
          <strong>{{ doc.hash_scheme }}</strong><code>{{ doc.hexhash }}</code>
        </a>
      </div>
    </footer>

    <main>

      <aside>

        {{edition_band(doc)}}

        {{article_dates(doc)}}

        {% if website_hooks %}
          <div class="article-buttons">
            {{ website_hooks.correspond() }}
            {{ website_hooks.cite() }}
          </div>
        {% endif %}

        <dl>

          {% if not website_hooks %}
            <dt>Correspondence</dt>
            <dd>
              {% for contributor in doc.contributors %}
                {% if contributor.email %}
                  <a href="mailto:{{ contributor.email[0] | escape }}">
                    {{ contributor.email | join(', ') | escape }}
                  </a>
                {% endif %}
              {% endfor %}
            </dd>

            <dt>Citation</dt>
            <dd>
              {% for contributor in doc.contributors %}
                {{ (contributor['given-names'] ~ ' ' ~ contributor.surname) | escape }}
              {% endfor %}
              (2022)
              "{{ doc.title }}"
              perm.pub {{ dsi_base_url }}/<br/>
              dsi:<code>{{ doc.dsi }}</code>
            </dd>
          {% endif %}

          <dt>Copyright</dt>
          <dd>
            {{ copyright(doc) }}
          </dd>

        </dl>
      </aside>

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

      {{ contributors_list(doc.contributors, show_email=False) }}

      {% if website_hooks %}
        <div class="article-buttons">
          {{ website_hooks.correspond() }}
          {{ website_hooks.cite() }}
        </div>
      {% 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>

    </main>

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


{# article_css_style is used to generated standalone HTML page and eprint PDF #}
{% macro article_css_style() %}
  <style>
    html {
      font-size: 12px;
    }
    {% include "epijats/printstrap.css" %}
  </style>
  {{- 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() }}
  <style>
    :root {
      --eprint-font-sans: 'Fira Sans', sans-serif;
      --eprint-font-mono: 'Fira Mono', monospace;
      --eprint-font-condensed: 'Fira Sans Condensed', sans-serif;
    }


    /* .eprint class for embedding website to control variable scope */

    .eprint {
      --main-color: #04b;
      --text-color: black;
      --light-text-color: #555;
      --accent-color: #04b;
    }


    /* Page */

    @page {
      color: #555;
      font-family: var(--eprint-font-sans);
      font-size: 1.1rem;
      font-weight: 300;
      line-height: 1.2;
      size: A4 portrait;
      margin: 96px 36.85px; /* = A4 @page width of 720px */

      @bottom-left {
        border-top: 0.005in solid;
        margin-top: 1em;
        padding-top: 1em;
        width: 60%;
      }
      @bottom-right {
        border-top: 0.005in solid;
        content: counter(page) " of " counter(pages);
        margin-top: 1em;
        padding-top: 1em;
        width: 40%;
      }
      @top-right {
        padding-bottom: 2rem;
      }
    }

    @page:first {
      margin-top: 128px;

      @top-left {
        background: url(static/cc.svg) left bottom / 0.8in 0.8in no-repeat;
        content: "";
        width: 30%;
      }
      @top-right {
        content: "";
      }
    }


    /* Article */

    article {
      color: var(--text-color);
      font-family: var(--eprint-font-sans);
      line-height: 1.4;
    }


    /* Screen-only tweaks */

    @media screen {
      article {
        background: url(static/cc.svg) calc(100% - 5mm) 5mm / 20mm 20mm no-repeat white;
      }
      article header .online-msg {
        display: none;
      }
    }


    /* 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::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 */

    article main {
      margin: 4em 0 1em;
    }

    article aside {
      position: absolute;
      left: 0;
      font-size: 0.8em;
      font-family: var(--eprint-font-condensed);
      font-stretch: condensed;
      overflow-wrap: anywhere;
      width: 20%;
    }
    article aside dl p {
      margin: 0;
    }
    article aside dl {
      margin: 1em 0;
    }
    article aside dt {
      display: inline-block;
      font-weight: bold;
    }
    article aside dt::before {
      content: "";
      display: block;
      height: 0.5em;
    }
    article aside dt::after {
      content: ": ";
    }
    article aside dd {
      display: inline;
      margin: 0;
    }
    article aside dd::after {
      content: '\A';
      white-space: pre-line;
    }

    article header {
      color: var(--light-text-color);
    }

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


    /* Specific Elements */

    article header p {
      margin: 12px 0;
    }
    article header .article-dsi code {
      margin: 0;
    }

    article .article-dsi, article .article-swhid {
      margin-bottom: 8px;
      word-break: break-all;
    }
    article .article-dsi code, article .article-swhid code {
      margin-left: 3px;
    }
    article .article-swhid {
      color: var(--light-text-color);
      font-weight: 300;
      line-height: 1.2;
    }
    article .article-swhid a {
      display: block;
    }
    article .article-swhid code {
      font-size: 0.825em;
    }

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

    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;
    }


    /* Media responsive logic */

    article aside {
      display: none;
    }

    @media print {
      article header .article-dsi, article header .online-msg {
        margin: 0;
      }
      article aside {
        display: block;
      }
      article main {
        margin-left: 25%;
      }
      article .top-metadata {
        display: none;
      }
      article footer .copyright {
        display: none;
      }
      article main footer {
        display: none;
      }
    }

    @media screen and (min-width: 66em) {
      article aside {
        display: block;
        left: 2.5%;
      }
      article main {
        margin-left: 25%;
      }
      article .top-metadata {
        display: none;
      }
      article main .article-buttons {
        display: none;
      }
      article footer .copyright {
        display: none;
      }
      article main footer {
        display: none;
      }
    }
  </style>
{% endmacro %}
