{% load static %}
{% load static tailwind_tags %}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bills!</title>
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" />
    {% tailwind_css %}
  </head>
  <body>
    <header class="p-3 text-bg-dark">
        <div class="container">
          <div class="flex-wrap d-flex align-items-center justify-content-center justify-content-lg-start">
            <a href="/" class="mb-2 text-white d-flex align-items-center mb-lg-0 text-decoration-none">
              <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
            </a>
            {% if user.is_authenticated %}
            <ul class="mb-2 nav col-12 col-lg-auto me-lg-auto justify-content-center mb-md-0">
              <li><div class="px-2 text-white nav-link"> Hi {{ user.username }}!</div></li>
              <li><a href="{% url 'bills:index' %}" class="px-2 text-white nav-link">My Bills</a></li>
              <!-- <li><a href="#" class="px-2 text-white nav-link">Features</a></li>
              <li><a href="#" class="px-2 text-white nav-link">Pricing</a></li>
              <li><a href="#" class="px-2 text-white nav-link">FAQs</a></li>
              <li><a href="#" class="px-2 text-white nav-link">About</a></li> -->
            </ul>
  
{% else %}
  <ul class="mb-2 nav col-12 col-lg-auto me-lg-auto justify-content-center mb-md-0">
    <li><a href="#" class="px-2 nav-link text-secondary">Home</a></li>
    <li><a href="#" class="px-2 text-white nav-link">Features</a></li>
    <li><a href="#" class="px-2 text-white nav-link">Pricing</a></li>
    <li><a href="#" class="px-2 text-white nav-link">FAQs</a></li>
    <li><a href="#" class="px-2 text-white nav-link">About</a></li>
  </ul>
{% endif %}
    
            
    
            <form class="mb-3 col-12 col-lg-auto 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="p-4 mx-auto col-lg-8 py-md-5">
   <!-- main -->
   <main>
    {% block content %}

    {% endblock %}

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


