{% comment %}background is defined in head.html{% endcomment %}
{% if background %}
  <header class="header bg-image" style="background-image: url('{{ background | relative_url }}')">
{% else %}
  <header class="header bg-no-image">
{% endif %}
    <div class="container">
      <div class="row">
        <div class="col-md-10 col-lg-8 position-relative mx-auto">
          <h1{% if page.layout == 'home' %} class="home"{% endif %}>{{ page.title }}</h1>
          
          <div class="lead">{{ page.description | markdownify }}</div>
          
          {% if page.collection == 'posts' %}
            <p class="meta">
              <time>{{ page.date | date: '%B %d, %Y' }}</time>
              {% if page.author or page.authors %}
                &bull; {{ page.author | join: ', ' }}{{ page.authors | join: ', ' }}
              {% endif %}
            </p>
          {% endif %}

          <div class="tags">
            {% if page.collection == 'posts' and page.tags and site.archive_permalink %}
              {% for tag in page.tags %}
              <a class="badge{% if site.rounded_corners != false %} rounded-pill{% endif %}" href="{{ site.archive_permalink | relative_url }}?tag={{ tag | url_encode }}">{{ tag }}</a>
              {% endfor %}
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    {% if page.background.img and page.background.by %}
      <div class="caption">
        {% if page.background.href %}
          Image by <a href="{{ page.background.href }}">{{ page.background.by }}</a>
        {% else %}
          Image by {{ page.background.by }}
        {% endif %}
      </div>
    {% endif %}
  </header>