default = """
<!doctype html>
<html>
  <head>
    {% set base = "" %}
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <title>{{ page_title }}</title>
    <style>
      .top_header {
        position: relative;
        height: 250px;
        background: rgb(70, 70, 124);
        background-image: url("{{ header_image }}");
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

      .top_header_text {
        position: absolute;
        bottom: 10px;
        left: 10px;        
        color: white;
        font-weight: bold;
        font-size: 2.5rem;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 5px;
        padding: 10px 20px;
        border-radius: 10px;
      }


      .top_menu a {
        font-weight: bold;
        color: #333;
        padding: 6px 12px;
        margin-left: 10px;
        text-decoration: none;

        transition: background 0.2s ease;
      }

      .top_menu a:hover {
        background: rgba(255, 255, 255, 0.3);
      }

      @media (min-width: 768px) {
        .top_header_text {
          font-size: 4rem;
        }
      }

      .card-title {
        font-weight: bold;
      }

      article {
        font-size: 1.1rem;
        line-height: 1.6;
      }
    {% block head_includes %}
    {% endblock %}
    </style>
  </head>
  <body>
    <div class="top_header">
        <div >
          <h1 class="top_header_text"><a style="border-radius: 5px; padding: 10px; opacity: 0.7; background: black">{{ page_title }}</a></h1>
        </div>
    </div>
    <div class="top_menu d-flex justify-content-end" style="margin-bottom: 20px;">

            <a href="index.html">Home</a>
            <a href="about.html">About</a>

    </div>
    
    <div id="content">{% block content %}{% endblock %}</div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
    {% block footer_includes %}
    {% endblock %}
  </body>
"""

index = """
{% extends "default.html" %}
{% block content %}

<div class="row row-cols-1 row-cols-md-3 g-4 px-1 py-2">
    {% for content_item in content_items %}
    <div class="col mb-3">
      <div class="card h-100" style="border-radius: 5px;">
        <img src="{{ content_item.image }}" alt="{{ content_item.title }}" class="card-img-top img-fluid" style="background: rgb(77, 77, 77); object-fit: cover; height: 200px; border-radius: 5px;">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title"><a class="text-decoration-none text-body" href="{{ content_item.slug}}.html ">{{ content_item.title }}</a></h5>
          <p class="card-text mb-3">{{ content_item.preview | safe}}</p>
          
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

{% endblock %}
"""

content_item="""
{% extends "default.html" %}

{% block head_includes %}
  {% if content_item.custom_css %}
    <link href="{{ content_item.custom_css }}">
  {% endif %}
{% endblock %}

{% block content %}
<div class="container mt-4 mb-5">
  {% if content_item.image %}<img src="{{ content_item.image }}" class="img-fluid mb-5" style="border-radius: 5px;">{% endif %}
  {% if not content_item.omit_second_title %}
    <h1>{{ content_item.title }}</h1>
  {% endif %}
  <article>{{ content_item.html | safe }}</article>
  <a href="index.html" class="btn btn-secondary mt-4">← Back</a>
</div>
{% endblock %}

{% block footer_includes %}
  {% if content_item.custom_js %}
    <script src="{{ content_item.custom_js }}"></script>
  {% endif %}
{% endblock %}
"""