{#
  Copyright (C) 2026 Front Matter.

  Rogue Scholar is free software; you can redistribute it and/or modify it
  under the terms of the MIT License; see LICENSE file for more details.
#}
<style>
  #profile-metrics {
    padding: 0;
  }
  #profile-metrics .metrics-grid.ui.cards {
    margin: 1rem 0 !important;
    padding: 0 !important;
  }
  #profile-metrics .metrics-grid.ui.cards > .card {
    margin: 0.5em;
  }
  #profile-metrics .metrics-card.card {
    background: transparent !important;
    overflow: hidden;
  }
  #profile-metrics .metrics-card .content {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: space-between;
    min-height: 8rem;
    padding: 0 !important;
    position: relative;
  }
  #profile-metrics .metrics-card .metrics-icon {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: flex-start;
    width: auto;
    height: auto;
    padding: 0;
    margin-bottom: 0.5rem;
    color: var(--metrics-accent);
  }
  #profile-metrics .metrics-card .metrics-icon::before {
    content: "";
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--metrics-icon-color, var(--metrics-accent));
    -webkit-mask-image: var(--metrics-icon);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: var(--metrics-icon);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--metrics-accent) 25%, transparent));
  }
  #profile-metrics .metrics-card--orcid .metrics-icon::before {
    background-color: transparent;
    background-image: var(--metrics-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-image: none;
    mask-image: none;
  }
  #profile-metrics .metrics-card .metrics-copy {
    width: 100%;
  }
  #profile-metrics .metrics-card .metrics-value {
    color: var(--metrics-accent);
    font-size: clamp(2rem, 3vw, 3.35rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
  }
  #profile-metrics .metrics-card .metrics-value a,
  #profile-metrics .metrics-card .meta {
    color: inherit !important;
  }
  #profile-metrics .metrics-card .metrics-value a {
    color: var(--metrics-accent) !important;
    text-decoration: none;
  }
  #profile-metrics .metrics-card .metrics-value a:hover {
    opacity: 0.82;
  }
  #profile-metrics .metrics-card .meta {
    color: #7c8798 !important;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 0.25rem;
  }
  #profile-metrics .metrics-placeholder.ui.placeholder {
    background: transparent !important;
    margin-bottom: 0.25rem;
  }
  #profile-metrics .metrics-card .ui.placeholder .line {
    background: rgba(148, 163, 184, 0.26);
    border-radius: 999px;
    height: 1.15rem;
  }
  #profile-metrics .metrics-card--posts {
    --metrics-accent: #ff5b1a;
    --metrics-icon: url("/static/images/article.svg");
  }
  #profile-metrics .metrics-card--recent {
    --metrics-accent: #f2a900;
    --metrics-icon: url("/static/images/date-range.svg");
  }
  #profile-metrics .metrics-card--citations {
    --metrics-accent: #8b5cf6;
    --metrics-icon: url("/static/images/citation.svg");
  }
  #profile-metrics .metrics-card--orcid {
    --metrics-accent: #A6CE39;
    --metrics-icon: url("/static/images/orcid.svg");
  }
  #profile-metrics .metrics-card--references {
    --metrics-accent: #4f86ff;
    --metrics-icon: url("/static/images/list-ordered.svg");
  }
  #profile-metrics .metrics-card--funding {
    --metrics-accent: #d946c5;
    --metrics-icon: url("/static/images/sponsor-tiers.svg");
  }
  #profile-metrics .metrics-card--first {
    --metrics-accent: #3c6df0;
    --metrics-icon: url("/static/images/clock-outline.svg");
  }
  #profile-metrics .metrics-card--subjects {
    --metrics-accent: #94a3b8;
    --metrics-icon: url("/static/images/chart-pie.svg");
  }
  #profile-metrics .metrics-card--subjects .meta {
    color: var(--metrics-accent) !important;
  }
  #profile-metrics .metrics-card--subjects .metrics-value {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    letter-spacing: -0.01em;
  }
  @media only screen and (max-width: 991px) {
    #profile-metrics {
      padding-left: 0;
      padding-right: 0;
    }
    #profile-metrics .metrics-grid.ui.cards {
      margin: 0 !important;
    }
    #profile-metrics .metrics-card.card {
      margin: 0 0 1rem !important;
    }
    #profile-metrics .metrics-card .content {
      min-height: 8rem;
      padding: 0 !important;
    }
    #profile-metrics .metrics-card .metrics-icon {
      margin-bottom: 0.5rem;
    }
  }
  @media only screen and (min-width: 768px) and (max-width: 1199px) {
    #profile-metrics .metrics-card .metrics-value {
      font-size: 2.55rem;
    }
  }
</style>

<div id="profile-metrics" style="display:none;">
  {# Row 1: Absolute counts #}
  <div class="ui four stackable cards metrics-grid">
    <div class="card metrics-card metrics-card--first">
      <div class="content">
        <div class="metrics-icon" role="img" aria-label="First post"></div>
        <div class="metrics-copy">
          <div class="ui placeholder metrics-placeholder" id="profile-metrics-first-placeholder">
            <div class="line"></div>
          </div>
          <div class="meta">{{ _("First Post") }}</div>
          <div class="metrics-value" id="profile-metrics-first" style="display:none;"></div>
        </div>
      </div>
    </div>
    <div class="card metrics-card metrics-card--posts">
      <div class="content">
        <div class="metrics-icon" role="img" aria-label="Article"></div>
        <div class="metrics-copy">
          <div class="ui placeholder metrics-placeholder" id="profile-metrics-posts-placeholder">
            <div class="line"></div>
          </div>
          <div class="meta">{{ _("All Posts") }}</div>
          <div class="metrics-value" id="profile-metrics-posts" style="display:none;"></div>
        </div>
      </div>
    </div>
    <div class="card metrics-card metrics-card--recent">
      <div class="content">
        <div class="metrics-icon" role="img" aria-label="Date range"></div>
        <div class="metrics-copy">
          <div class="ui placeholder metrics-placeholder" id="profile-metrics-recent-placeholder">
            <div class="line"></div>
          </div>
          <div class="meta">{{ _("Posts last 30 Days") }}</div>
          <div class="metrics-value" id="profile-metrics-recent" style="display:none;"></div>
        </div>
      </div>
    </div>
    <div class="card metrics-card metrics-card--citations">
      <div class="content">
        <div class="metrics-icon" role="img" aria-label="Citations"></div>
        <div class="metrics-copy">
          <div class="ui placeholder metrics-placeholder" id="profile-metrics-citations-placeholder">
            <div class="line"></div>
          </div>
          <div class="meta">{{ _("Cited Posts") }}</div>
          <div class="metrics-value" id="profile-metrics-citations" style="display:none;"></div>
        </div>
      </div>
    </div>
  </div>

  {# Row 2: Percentage metrics #}
  <div class="ui four stackable cards metrics-grid">
    <div class="card metrics-card metrics-card--subjects">
      <div class="content">
        <div class="metrics-icon" role="img" aria-label="Subjects"></div>
        <div class="metrics-copy">
          <div class="ui placeholder metrics-placeholder" id="profile-metrics-subjects-placeholder">
            <div class="line"></div>
          </div>
          <div class="meta">{{ _("Posts main Subject Area") }}</div>
          <div class="metrics-value" id="profile-metrics-subjects" style="display:none;"></div>
        </div>
      </div>
    </div>
    <div class="card metrics-card metrics-card--orcid">
      <div class="content">
        <div class="metrics-icon" role="img" aria-label="ORCID"></div>
        <div class="metrics-copy">
          <div class="ui placeholder metrics-placeholder" id="profile-metrics-orcid-placeholder">
            <div class="line"></div>
          </div>
          <div class="meta">{{ _("Posts with ORCID") }}</div>
          <div class="metrics-value" id="profile-metrics-orcid" style="display:none;"></div>
        </div>
      </div>
    </div>
    <div class="card metrics-card metrics-card--references">
      <div class="content">
        <div class="metrics-icon" role="img" aria-label="References"></div>
        <div class="metrics-copy">
          <div class="ui placeholder metrics-placeholder" id="profile-metrics-references-placeholder">
            <div class="line"></div>
          </div>
          <div class="meta">{{ _("Posts with References") }}</div>
          <div class="metrics-value" id="profile-metrics-references" style="display:none;"></div>
        </div>
      </div>
    </div>
    <div class="card metrics-card metrics-card--funding">
      <div class="content">
        <div class="metrics-icon" role="img" aria-label="Funding"></div>
        <div class="metrics-copy">
          <div class="ui placeholder metrics-placeholder" id="profile-metrics-funding-placeholder">
            <div class="line"></div>
          </div>
          <div class="meta">{{ _("Posts with Funding") }}</div>
          <div class="metrics-value" id="profile-metrics-funding" style="display:none;"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(function() {
  var baseUrl = "/api";
  var headers = { "Accept": "application/vnd.inveniordm.v1+json" };
  var ror = {{ ror | tojson }};
  var baseQ = "ror:" + ror;

  function fmt(n) {
    if (n >= 1000) {
      var k = n / 1000;
      return (k % 1 === 0 ? k : k.toFixed(1)) + "K";
    }
    return n.toLocaleString();
  }

  function pct(n, total) {
    if (!total) { return "0.0%"; }
    return (n / total * 100).toFixed(1) + "%";
  }

  function totalFrom(result) {
    if (!result || !result.hits) { return 0; }
    if (typeof result.hits.total === "number") { return result.hits.total; }
    if (result.hits.total && typeof result.hits.total.value === "number") {
      return result.hits.total.value;
    }
    return 0;
  }

  function formatPublicationDate(dateValue) {
    if (!dateValue) { return "-"; }
    var parsed = new Date(dateValue + "T12:00:00Z");
    if (isNaN(parsed.getTime())) { return dateValue.slice(0, 4); }
    return String(parsed.getUTCFullYear());
  }

  function fetchRecords(extraQ) {
    var q = extraQ ? baseQ + " AND " + extraQ : baseQ;
    var url = baseUrl + "/records?q=" + encodeURIComponent(q) + "&size=1";
    return fetch(url, { headers: headers }).then(function(r) {
      if (!r.ok) { throw new Error("Request failed: " + r.status); }
      return r.json();
    });
  }

  function fetchFirst() {
    var url = baseUrl + "/records?q=" + encodeURIComponent(baseQ) + "&size=1&sort=oldest";
    return fetch(url, { headers: headers }).then(function(r) {
      if (!r.ok) { throw new Error("Request failed: " + r.status); }
      return r.json();
    });
  }

  function show(id, text) {
    var el = document.getElementById(id);
    var ph = document.getElementById(id + "-placeholder");
    el.textContent = text;
    ph.style.display = "none";
    el.style.display = "";
  }

  var d = new Date();
  d.setDate(d.getDate() - 30);
  var since = d.toISOString().slice(0, 10);
  var recentQ = "metadata.publication_date:[" + since + " TO *]";
  var orcidQ = "metadata.creators.person_or_org.identifiers.identifier:*";
  var referencesQ = "metadata.references.identifier:*";
  var citationsQ = "custom_fields.rs\\:citations.identifier:*";

  var totalPosts = 0;

  Promise.all([
    fetchFirst(),
    fetchRecords(""),
    fetchRecords(recentQ),
    fetchRecords(citationsQ),
  ]).then(function(results) {
    totalPosts = totalFrom(results[1]);
    if (totalPosts === 0) { return; }
    document.getElementById("profile-metrics").style.display = "";

    var oldestHit = results[0].hits && results[0].hits.hits && results[0].hits.hits.length
      ? results[0].hits.hits[0] : null;
    var oldestDate = oldestHit && oldestHit.metadata ? oldestHit.metadata.publication_date : null;
    show("profile-metrics-first", formatPublicationDate(oldestDate));

    var buckets = results[1].aggregations && results[1].aggregations.subject
      ? results[1].aggregations.subject.buckets : [];
    var firstSubject = buckets.length > 0 ? (buckets[0].label || buckets[0].key || "") : "";
    if (firstSubject) {
      show("profile-metrics-subjects", firstSubject);
    } else {
      document.getElementById("profile-metrics-subjects-placeholder").style.display = "none";
    }

    show("profile-metrics-posts", fmt(totalPosts));
    show("profile-metrics-recent", fmt(totalFrom(results[2])));
    show("profile-metrics-citations", fmt(totalFrom(results[3])));

    return Promise.all([
      fetchRecords(orcidQ),
      fetchRecords(referencesQ),
      fetchRecords("funder:*"),
    ]);
  }).then(function(results) {
    if (!results) { return; }
    show("profile-metrics-orcid", pct(totalFrom(results[0]), totalPosts));
    show("profile-metrics-references", pct(totalFrom(results[1]), totalPosts));
    show("profile-metrics-funding", pct(totalFrom(results[2]), totalPosts));
  }).catch(function(err) {
    console.error("Failed to load profile metrics:", err);
  });
})();
</script>