{% load static %}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" />
  </head>
  <body>
    <header class="p-3 text-bg-dark">
        <div class="container">
          <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
            <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
              <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
            </a>
    
            <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
              <li><a href="#" class="nav-link px-2 text-secondary">Home</a></li>
              <li><a href="#" class="nav-link px-2 text-white">Features</a></li>
              <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
              <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
              <li><a href="#" class="nav-link px-2 text-white">About</a></li>
            </ul>
    
            <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
              <input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..." aria-label="Search">
            </form>
    
            <div class="text-end">
                {% if user.is_authenticated %}
                    <a href="{% url 'logout' %}" class="btn btn-outline-light me-2">Logout</a>
                {% else %}
                    <a href="{% url 'login' %}" class="btn btn-outline-light me-2">Login</a>
                    <a href="{% url 'signup' %}" class="btn btn-warning">Sign-up</a>
                {% endif %}
              <!-- <button type="button" class="btn btn-outline-light me-2">Login</button> -->
              <!-- <button type="button" class="btn btn-warning">Sign-up</button> -->
            </div>
          </div>
        </div>
      </header>
    <script src="{% static 'js/bootstrap.bundle.min.js' %}" crossorigin="anonymous"></script>
   <!-- end header -->
   <div class="col-lg-8 mx-auto p-4 py-md-5">
   <!-- main -->
   <main>
    {% block content %}
<h1>{{ section.title }}</h1>

{% for story in story_list %}
<h2>
  <a href="{{ story.get_absolute_url }}">
    {{ story.headline|upper }}
  </a>
</h2>
<p>{{ story.tease|truncatewords:"100" }}</p>
{% endfor %}
{% endblock %}

  </main>
  <!-- end main -->
</div>


