---
### ALL PAGES ###
layout: themes/[ site.theme.id ]/frontend/core/base

### PAGE CONFIG ###
---

{% comment %}
  NEWSFLASH TEAM MEMBER — the byline page
  Same data contract as classy's member page (page.member.id/position/links/
  description/location/joined/skills/hobbies + page content as the bio),
  presented as a reporter profile: byline head, beat facts, and the bio.
{% endcomment %}

<!-- ============================================ -->
<!-- BYLINE HEAD -->
<!-- ============================================ -->
<section class="pb-4">
  <div class="container text-center" data-lazy="@class animation-slide-up">
    <div class="avatar avatar-5xl mb-4 mx-auto">
      {%- uj_member page.member.id, "image-tag", class="rounded-circle object-fit-cover team-member-image" -%}
    </div>

    <span class="kicker d-flex justify-content-center mb-2">{{ page.member.position }}</span>
    <h1 class="display-4 my-2">
      {%- uj_member page.member.id, "name" -%}
    </h1>

    {% iftruthy page.member.description %}
      <p class="lead mb-4">{{ page.member.description }}</p>
    {% endiftruthy %}

    {% iftruthy page.member.links %}
      <div class="d-flex justify-content-center gap-2">
        {% for link in page.member.links %}
          {% assign link_icon = link.id %}
          {% if link.id == "website" %}{% assign link_icon = "globe" %}{% endif %}
          <a href="{{ link.url }}" class="btn btn-outline-dark avatar avatar-lg rounded-circle d-flex align-items-center justify-content-center" target="_blank" rel="nofollow noopener" title="{{ link.title }}">
            {% uj_icon link_icon, "" %}
          </a>
        {% endfor %}
      </div>
    {% endiftruthy %}
  </div>
</section>

<!-- ============================================ -->
<!-- THE FACTS — beat card strip -->
<!-- ============================================ -->
<section class="pt-0">
  <div class="container">
    <div class="row g-4 justify-content-center">
      {% iftruthy page.member.location %}
        <div class="col-lg-3 col-md-6" data-lazy="@class animation-slide-up">
          <div class="card h-100 p-4 text-center">
            <span class="feature-icon d-inline-flex align-items-center justify-content-center rounded-circle text-bg-primary mb-3 mx-auto">
              {% uj_icon "map-marker-alt" %}
            </span>
            <span class="kicker justify-content-center mb-2">Based in</span>
            <p class="fw-bold mb-0">{{ page.member.location }}</p>
          </div>
        </div>
      {% endiftruthy %}

      {% iftruthy page.member.joined %}
        <div class="col-lg-3 col-md-6" data-lazy="@class animation-slide-up">
          <div class="card h-100 p-4 text-center">
            <span class="feature-icon d-inline-flex align-items-center justify-content-center rounded-circle text-bg-primary mb-3 mx-auto">
              {% uj_icon "calendar" %}
            </span>
            <span class="kicker justify-content-center mb-2">On the masthead since</span>
            <p class="fw-bold mb-0">{{ page.member.joined | date: "%B %Y" }}</p>
          </div>
        </div>
      {% endiftruthy %}

      {% iftruthy page.member.skills %}
        <div class="col-lg-3 col-md-6" data-lazy="@class animation-slide-up">
          <div class="card h-100 p-4 text-center">
            <span class="feature-icon d-inline-flex align-items-center justify-content-center rounded-circle text-bg-primary mb-3 mx-auto">
              {% uj_icon "briefcase" %}
            </span>
            <span class="kicker justify-content-center mb-2">The beat</span>
            <p class="fw-bold mb-0">{{ page.member.skills | join: ", " }}</p>
          </div>
        </div>
      {% endiftruthy %}

      {% iftruthy page.member.hobbies %}
        <div class="col-lg-3 col-md-6" data-lazy="@class animation-slide-up">
          <div class="card h-100 p-4 text-center">
            <span class="feature-icon d-inline-flex align-items-center justify-content-center rounded-circle text-bg-primary mb-3 mx-auto">
              {% uj_icon "heart" %}
            </span>
            <span class="kicker justify-content-center mb-2">Off the clock</span>
            <p class="fw-bold mb-0">{{ page.member.hobbies | join: ", " }}</p>
          </div>
        </div>
      {% endiftruthy %}
    </div>
  </div>
</section>

<!-- ============================================ -->
<!-- BIO -->
<!-- ============================================ -->
<section class="pt-0">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-9">
        {%- capture member_name -%}{%- uj_member page.member.id, "name" -%}{%- endcapture -%}
        {%- assign first_name = member_name | split: ' ' | first -%}
        <div class="section-head" data-lazy="@class animation-slide-up">
          <h2>About {{ first_name }}</h2>
          <span class="rule"></span>
        </div>
        <div class="fs-5" data-lazy="@class animation-slide-up">
          {{ content | uj_content_format }}
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============================================ -->
<!-- BACK TO THE NEWSROOM -->
<!-- ============================================ -->
<section class="pt-0">
  <div class="container text-center" data-lazy="@class animation-slide-up">
    <a href="/team" class="btn btn-outline-dark btn-lg">
      {% uj_icon "arrow-left", "me-2" %}Back to the newsroom
    </a>
  </div>
</section>