Django formset dynamic add row to table - django

i have created a formset that is rendering in table and when i add a row the input box only is rendered in the first row and the second row is only the template code appearing.
the table will be a form posted to a view function for Formset process to capture all the data in the added dynamic table with add row.
HTML
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Dashboard - Brand</title>
<link rel="stylesheet" href="{% static 'assets/bootstrap/css/bootstrap.min.css' %}">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
<link rel="stylesheet" href="{% static 'assets/css/Navigation-Clean.css' %}">
</head>
<body id="page-top">
<div></div>
<div>
<nav class="navbar navbar-light navbar-expand-sm border rounded shadow-sm navigation-clean">
<div class="container"><a class="navbar-brand" href="#">Company Name</a><button data-toggle="collapse" data-target="#navcol-1" class="navbar-toggler"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse"
id="navcol-1">
<ul class="nav navbar-nav ml-auto">
<li role="presentation" class="nav-item"><a class="nav-link active" href="#">My Startup</a></li>
<li role="presentation" class="nav-item"><a class="nav-link" href="#">Campaigns</a></li>
<li role="presentation" class="nav-item"><a class="nav-link" href="#">Guide</a></li>
<li class="dropdown nav-item"><a data-toggle="dropdown" aria-expanded="false" class="dropdown-toggle nav-link" href="#">Account</a>
<div role="menu" class="dropdown-menu"><a role="presentation" class="dropdown-item" href="#">Edit</a><a role="presentation" class="dropdown-item" href="#">Reset Password</a><a role="presentation" class="dropdown-item" href="#">Log Out</a></div>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div>
<div class="container">
<div class="row"></div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12" style="padding-top: 31px;">
<div class="card shadow mb-4" style="padding: 0;padding-top: 2;">
<form id="my-form" method="post"> {% csrf_token %}
<div class="card-body" style="background-color: rgba(255,255,255,0);"><button id="Add" class="btn btn-primary" type="button">+ Add</button>
<div class="table-responsive">
{% for form in formset %}
<table class="table">
<thead>
<tr>
<th style="width: 21px;"></th>
<th style="width: 295px;">Name</th>
<th style="width: 257px;">Position</th>
<th style="width: 59px;">Service</th>
<th style="width: 267px;">Previouse Position</th>
<th style="width: 64px;">Service</th>
</tr>
</thead>
<tbody>
<tr>
<td><button id="Remove" class="btn btn-danger" type="button">-</button></td>
<td>{{form.name}}</td>
<td>{{form.position}}</td>
<td>{{form.service}}</td>
<td>{{form.Previous_Position}}</td>
<td>{{form.service_exp}}</td>
</tr>
<tr></tr>
</tbody>
</table>
{% endfor %}
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="wrapper">
<div class="d-flex flex-column" id="content-wrapper">
<div id="content">
<div class="container-fluid"></div>
</div>
<footer class="bg-white sticky-footer">
<div class="container my-auto">
<div class="text-center my-auto copyright"><span>Copyright © Brand 2019</span></div>
</div>
</footer>
</div><a class="border rounded d-inline scroll-to-top" href="#page-top"><i class="fas fa-angle-up"></i></a></div>
<script src="{% static 'assets/js/jquery.min.js' %}"></script>
<script src="{% static 'assets/js/tt.js' %}"></script>
<script src="{% static 'assets/bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'assets/js/theme.js' %}"></script>
</body>
</html>
JS Code for adding rows:
var html = '<tr><td><button id="Remove" class="btn btn-danger" type="button">-</button></td><td>{{form.name}}</td><td>{{form.position}}</td><td>{{form.service}}</td><td>{{form.Previous_Position}}</td><td>{{form.service_exp}}</td></tr>';
$(function(){
$(document).on('click','#Add', function(){
$('tbody').append(html);
})
});
```````

Related

how to make a url variable available to all the template

I have a specific requirement - say I hit the url as below -
http://127.0.0.1:8000/brand_product_list/1
in the above url the last 1 is a brand-id and I need this brand-id to be available to all the templates for eg. if I call
my brand_product_list looks like below in views.py -
# Product List as per Brand1
def brand_product_list(request,brand_id):
brandid = brand_id
brand_b=Brand.objects.get(id=brand_id)
cats_b=Product.objects.filter(brand=brand_b).distinct().values('category__title','category_id')
data_b=Product.objects.filter(brand=brand_b).order_by('-id')
colors_b=ProductAttribute.objects.filter(brand=brand_b).distinct().values('color__title','color__id','color__color_code')
sizes_b=ProductAttribute.objects.filter(brand=brand_b).distinct().values('size__title','size__id')
flavors_b=ProductAttribute.objects.filter(brand=brand_b).distinct().values('flavor__title','flavor__id')
return render(request,'brand_product_list.html',
{
'data_b':data_b,
'brandid':brandid,
'cats_b':cats_b,
'brand_b':brand_b,
'sizes_b':sizes_b,
'colors_b':colors_b,
'flavors_b':flavors_b,
})
in the above code I need brandid to be available in cart.html which is called from clicking cart button in base.html which is extended in brand_product_list.html
point is since base.html is extended in brand_product_list.html, the brandid is available to base.html (means child variable available in parent) and I can filter stuff based on brand but somehow when I click on cart button in base.html, the same brandid is not taken to cart.html even though base.html is extended in cart.html (means parent variable not available in child).
I tried include as below
{% include "./brand_product_list.html" %}
but since in brand_product_list.html, there is some filter.html, it throws error that argument is not available --
NoReverseMatch at /cart
Reverse for 'filter_data_b' with arguments '('brandid',)' not found. 1 pattern(s) tried: ['filter_data_b/(?P<brand_id>[0-9]+)$']
Request Method: GET
Request URL: http://127.0.0.1:8000/cart
Django Version: 3.2.8
Exception Type: NoReverseMatch
Exception Value:
Reverse for 'filter_data_b' with arguments '('brandid',)' not found. 1 pattern(s) tried: ['filter_data_b/(?P<brand_id>[0-9]+)$']
Exception Location: C:\Users\j1011470\Documents\Personal\Business\env\lib\site-packages\django\urls\resolvers.py, line 694, in _reverse_with_prefix
Python Executable: C:\Users\j1011470\Documents\Personal\Business\env\Scripts\python.exe
Python Version: 3.8.8
Python Path:
['C:\\Users\\j1011470\\Documents\\Personal\\Business\\Pitaara',
I request you to please help in this situation..
Any possibility of using context_processor with request and one argument ? or some other way...
cart.html which gets called on the click on cart button in base.html is below -
{% extends './base.html' %}
{% load static %}
{% block content %}
<script src="{% static 'custom.js' %}"></script>
<main class="container my-4" id="cartList">
<!-- Featured Products -->
<h3 class="my-4 border-bottom pb-1">Cart ({{totalitems}})</h3>
<table class="table table-bordered">
<thead>
<tr>
<th>Product</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{% for product_id,item in cart_data.items %}
<tr>
<td>
<img src="/media/{{item.image}}" width="50" />
<p>{{item.title}}</p>
</td>
<td>
<input type="number" class="product-qty-{{product_id}}" value="{{item.qty}}" style="vertical-align: bottom;" />
<button class="btn btn-sm btn-primary update-item" data-item="{{product_id}}"><i class="bi bi-arrow-clockwise"></i></button>
<button class="btn btn-sm btn-danger delete-item" data-item="{{product_id}}"><i class="bi bi-trash"></i></button>
</td>
<td>$ {{item.price}}</td>
<td>$ {% widthratio item.price 1 item.qty %}</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<th>Total</th>
<th>Rs. {{total_amt}}</th>
</tr>
{% if totalitems %}
<tr>
<td colspan="4" align="right">
Checkout <i class="fa fa-long-arrow-alt-right"></i>
</td>
</tr>
{% endif %}
</tfoot>
</table>
</main>
{% endblock %}
base.html is below
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>{% block title %}Delicious Doughnuts{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.6.1/font/bootstrap-icons.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-white border-bottom">
<div class="container-fluid">
<a class="navbar-brand" href="#">Delicious</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
{% if brandid %}
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="/brand_product_list/{{brandid}}">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="/brand_product_list/{{brandid}}">Link</a>
</li>
{% elif cart_data.items %}
{% for productid, item in cart_data.items %}
{% if forloop.first %}
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="/brand_product_list/{{item.brandid}}">Home</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
</ul>
<form class="d-flex">
<a aria-current="page" href="{% url 'cart' %}"><i class="bi bi-cart3" style="font-size: 1.5rem; color: cornflowerblue;"></i>Cart (<span class="cart-list">{{request.session.cartdata|length}}</span>)</a>
<ul>
<li class="nav-item dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" id="navbarDropdown" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="bi bi-user"></i> My Account
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{% if user.is_authenticated %}
<a class="dropdown-item" href="d">Dashboard</a>
<a class="dropdown-item" href="{% url 'logout' %}">Logout</a>
{% else %}
<a class="dropdown-item" href="{% url 'login' %}">Login</a>
<a class="dropdown-item" href="Signup">Signup</a>
{% endif %}
</div>
</li>
</ul>
</form>
</div>
</div>
</header>
<div id="content">
{% block content %}
{% endblock %}
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top container">
<div class="row">
<div class="col-12 col-md">
Delicious Doughnuts
<small class="d-block mb-3 text-muted">© 2017-2020</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Cool stuff</a></li>
<li><a class="text-muted" href="#">Random feature</a></li>
<li><a class="text-muted" href="#">Team feature</a></li>
<li><a class="text-muted" href="#">Stuff for developers</a></li>
<li><a class="text-muted" href="#">Another one</a></li>
<li><a class="text-muted" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
<li><a class="text-muted" href="#">Locations</a></li>
<li><a class="text-muted" href="#">Privacy</a></li>
<li><a class="text-muted" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
also the base.html code has href="{% url 'cart' %}" for which the url.py is
path('cart',views.cart_list,name='cart'),
views.py having above cart_list.html is -
# Cart List Page
def cart_list(request):
total_amt=0
if 'cartdata' in request.session:
for p_id,item in request.session['cartdata'].items():
total_amt+=int(item['qty'])*float(item['price'])
return render(request, 'cart.html',{'cart_data':request.session['cartdata'],'totalitems':len(request.session['cartdata']),'total_amt':total_amt})
else:
return render(request, 'cart.html',{'cart_data':'','totalitems':0,'total_amt':total_amt})

I tried stuff, some worked some didn't - I feel the way to do is to save the brandid in the session, the moment the url is hit like below -
# Product List as per Brand1
def brand_product_list(request,brand_id):
request.session['prod_brand'] = brand_id
brandid = brand_id
brand_b=Brand.objects.get(id=brand_id)
cats_b=Product.objects.filter(brand=brand_b).distinct().values('category__title','category_id')
data_b=Product.objects.filter(brand=brand_b).order_by('-id')
colors_b=ProductAttribute.objects.filter(brand=brand_b).distinct().values('color__title','color__id','color__color_code')
sizes_b=ProductAttribute.objects.filter(brand=brand_b).distinct().values('size__title','size__id')
flavors_b=ProductAttribute.objects.filter(brand=brand_b).distinct().values('flavor__title','flavor__id')
return render(request,'brand_product_list.html',
{
'data_b':data_b,
'brandid':brandid,
'cats_b':cats_b,
'brand_b':brand_b,
'sizes_b':sizes_b,
'colors_b':colors_b,
'flavors_b':flavors_b,
'prodbrand':request.session['prod_brand'],
})

Not able to load template that has been extended in Django

The django 'extends' template is not loading the content. In this I am trying to extend index.html to homepage.html. Both the files are under the same templates directory. The code snippets are shown below:
index.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Tashi eComm</title>
<!-- adding title icon -->
<link rel = "icon" href ="{% static 'images/TecommLogo.png' %}" type = "image/x-icon">
<!-- Bootstrap 5 link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- Bootstrap 5 popper and javascript link -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
<!--Bootstrap icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<!-- stylesheet -->
<link rel="stylesheet" type="text/css" href="{% static 'css/stylesheet.css' %}"/>
</head>
<body>
<div class="wrapper">
<div class="panel panel-default">
<div class="panel-heading">
<div class="d-flex justify-content-end ">
<div class="top-header m-2 ">
Marketplace
</div>
<div class="top-header m-2 ">|</div>
<div class="top-header m-2">
Buyer Protection
</div>
<div class="top-header m-2 ">|</div>
<div class="top-header m-2">
Track Order
</div>
<div class="top-header m-2 ">|</div>
<div class="top-header m-2">
<div class="form-group">
<select id="demo_overview_minimal" class="select-picker" data-role="select-dropdown" data-profile="minimal">
<!-- options -->
<option>BTN</option>
<option>USD</option>
<option>EUR</option>
</select>
</div>
</div>
</div>
</div>
<div class="panel-body">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand ms-5" href="#"><img src="{% static 'images/TecommLogo.png' %}" alt="Logo" height="60px" width="60px"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Shop by Category
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="d-flex Search col-5">
<input class="form-control me-auto col-8" type="search" placeholder="Search for anything" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
{% block content %}
{% endblock content%}
<footer>
<div class="panel panel-default">
<div class="panel-footer bg-light ">
<div class="row ms-5 me-5">
<div class="col-sm-3">
<div class="row">
<h3>Policies</h3>
</div>
<div class="row">
Privacy Policies
</div>
<div class="row">
Refund Policies
</div>
<div class="row">
Terms & Conditions
</div>
</div>
<div class="col-sm-3">
<div class="row">
<h3>Vendor</h3>
</div>
<div class="row">
Start Selling
</div>
<div class="row">
Learn to Sell
</div>
</div>
<div class="col-sm-3">
<div class="row">
<h3>Connect With Us</h3>
</div>
<div class="row">
<i class="bi bi-facebook"></i>Facebook
</div>
<div class="row">
<i class="bi bi-twitter"></i>Twiiter
</div>
<div class="row">
<i class="bi bi-instagram"></i>Instagram
</div>
</div>
<div class="col-sm-3">
<div class="row">
<h3>Help & Contact</h3>
</div>
<div class="row">
Contact
</div>
<div class="row">
About Us
</div>
<div class="row">
FAQs
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
homepage.html
{% extends 'index.html' %}
{% block content %}
Hello! this is my block content
{% endblock content %}
urls.py
from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.urls import path, include
from . import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.homepage, name="homepage"),
# path('accounts/', include('accounts.urls')),
]
urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
views.py
from django.shortcuts import render
def homepage(request):
return render(request, 'index.html')
I have done the similar projects earlier but it was working fine. I don't know why it doesn't work in this project while i have done everything similar
I have been trying this for a whole day. Any help will be appreciated.

You want to extend index.html to homepage.html so you have to call homepage.html in your views.py file.
from django.shortcuts import render
def homepage(request):
return render(request, 'homepage.html')

How can I display glyphicon-plus in django?

i'm making my blog site via django.
but plus icon is not working in post.html :(
what is wrong?
directory path is blog/templates/base.html, blog/templates post.html
What I've tried to do:
move the <div class "page-header"> to post.html
If you need any information I didn't provide, please ask and I will. Guys, what is wrong? Thanks in advance for any help!
base.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{% static 'blog/style.css' %}">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Django Project</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" ariacontrols="navbarSupportedContent" aria-expanded="false" aria-lable="Toggle navigation">
<span class="navbar-toggle-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'home:home' %}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'polls:index' %}">Polls <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'bookmark:list' %}">Bookmark <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'blog:post_list' %}">Blog <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<div class="page-header">
{% if user.is_authenticated %}
<span class="glyphicon glyphicon-plus"></span>
{% endif %}
<h1>Blog</h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-8">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
</body>
</html>
post.html
{% extends 'blog/base.html' %}
{% block content %}
{% for post in posts %}
<div class="post">
<div class="date">
<p>{{ post.published_date }}</p>
</div>
<h1>{{ post.title }}</h1>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
{% endblock %}

Make login/logout button defined in base.html appear in all pages that extend it

I am trying to implement login/logout functionality using the default auth system in Django 2.2. I have the following included in my base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- navbar area start -->
<nav class="navbar navbar-area navbar-expand-lg absolute">
<div class="container-fluid nav-container">
<div class="logo-wrapper navbar-brand">
<a href="{% url 'home' %}" class="logo ">
<img src="/static/asset/img/logo.png" alt="logo">
</a>
</div>
<div class="collapse navbar-collapse" id="cgency">
<!-- navbar collapse start -->
<ul class="navbar-nav" id="primary-menu">
<!-- navbar- nav -->
<li class="nav-item active dropdown">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="{% url 'features' %}">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pricing' %}">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'ARprogram' %}">Academic Program</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'ARcertification' %}">Certification</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="{% url 'knowledgebase' %}">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'contactus' %}">Contact</a>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar btn wrapper -->
<div class="responsive-mobile-menu">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#cgency" aria-controls="cgency"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- navbar collapse end -->
<div class="nav-right-content">
<ul>
<li class="nav-btn">
{% if request.user.is_authenticated %}
<!-- Hi {{ user.username }}! -->
logout
{% else %}
login
{% endif %}
</li>
<li class="nav-btn">
Download
</li>
</ul>
</div>
</div>
</nav>
<!-- navbar area end -->
{% block content %}
{% endblock %}
<!-- footer area start -->
<footer class="footer-area footer-bg">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="footer-widget widget about_widget"><!-- footer widget -->
<img src="/static/asset/img/footer-logo.png" alt="">
<ul class="social-icon text-center">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-linkedin"></i></li>
</ul>
<div class="copyright-text margin-top-30">© Copyrights 2019 EnablAR </div>
</div><!-- //. footer widget -->
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget widget"><!-- footer widget -->
<h4 class="widget-title">Useful Links</h4>
<ul>
<li>Features</li>
<li>Pricing</li>
<li>Getting Started</li>
<li>Academic Program</li>
<li>Certification</li>
</ul>
</div><!-- //. footer widget -->
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget widget"><!-- footer widget -->
<h4 class="widget-title">Need Help?</h4>
<ul>
<li>FAQS</li>
<li>Help</li>
<li>Contact</li>
</ul>
</div><!-- //. footer widget -->
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget widget"><!-- footer widget -->
<h4 class="widget-title">Download</h4>
<ul>
<li>For windows</li>
</ul>
</div><!-- //. footer widget -->
</div>
</div>
</div>
</footer>
<!-- footer area end -->
</body>
</html>
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About EnablAR</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/static/asset/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/asset/css/fontawesome.min.css">
<link rel="stylesheet" href="/static/asset/css/flaticon.css">
<link rel="stylesheet" href="/static/asset/css/animate.css">
<link rel="stylesheet" href="/static/asset/css/slick.min.css">
<link rel="stylesheet" href="/static/asset/css/magnific-popup.css">
<link rel="stylesheet" href="/static/asset/css/style.css">
<link rel="stylesheet" href="/static/asset/css/responsive.css">
</head>
<body>
{% extends "base.html" %}
{% block content %}
<!-- breadcrumb area start-->
<div class="breadcrumb-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="breadcrumb-inner">
<h1 class="page-title">About</h1>
<ul class="page-list">
<li class="index.html">Home</li>
<li>About</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- breadcrumb area end-->
<!-- block feature area start -->
<div class="block-feature-area padding-top-120" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="block-feature-item">
<div class="row">
<div class="col-lg-6">
<div class="img-wrapper box-shadow-90">
<img src="/static/asset/img/softawe-1.jpg" alt="software image">
</div>
</div>
<div class="col-lg-6">
<div class="content-block-area padding-left-50">
<h4 class="title wow fadeInUp">Three step process to make your learning content AR enabled</h4>
<p>If you don’t know coding, youre covered!. Simply follow EnablAR’s 3 step process to create your own AR apps.</p>
<ul style="margin-left: -5%;">
<li>Create your 3d models</li>
<li>Use EnablAR</li>
<li>Deploy your App</li>
</ul>
<div class="btn-wrapper margin-top-20 wow fadeInDown">
Read More
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- block feature area end -->
<!-- block feature area start -->
<div class="block-feature-area padding-120">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="block-feature-item">
<div class="row reorder-xs">
<div class="col-lg-6">
<div class="content-block-area padding-right-50">
<h4 class="title wow fadeInUp">Track student usage of your apps</h4>
<p>Using enabler helps you track student engagement on the apps created by you. This is a first of its kind platform that helps teachers track how their students are learning</p>
<div class="btn-wrapper margin-top-20">
Read More
</div>
</div>
</div>
<div class="col-lg-6">
<div class="img-wrapper box-shadow-90 wow fadeInDown">
<img src="/static/asset/img/softawe-2.jpg" alt="software image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- block feature area end -->
<div class="back-to-top base-color-2">
<i class="fas fa-rocket"></i>
</div>
<script src="/static/asset/js/jquery.js"></script>
<script src="/static/asset/js/popper.min.js"></script>
<script src="/static/asset/js/bootstrap.min.js"></script>
<script src="/static/asset/js/slick.min.js"></script>
<script src="/static/asset/js/jquery.magnific-popup.js"></script>
<script src="/static/asset/js/wow.min.js"></script>
<script src="/static/asset/js/TweenMax.js"></script>
<script src="/static/asset/js/mousemoveparallax.js"></script>
<script src="/static/asset/js/contact.js"></script>
<script src="/static/asset/js/main.js"></script>
{% endblock content %}
</body>
</html>
However, Even though I extend my index.html with base.html, it doesn't show the login/logout button correctly.
Even when the user is logged-in it always shows the login button instead of logout button. Whereas, if I include the above snippet within my index.html it works correctly. What am i missing?
I don't want to have redundant code in all my htmls.

How can I fix this bug in my django template?

I have an error in my template. I have tried to see where I've gone wrong, but couldn't identify the bug.
This is index.1.html:
{% extends 'clinic/clinicbase.html' %}
{% load static %}
{% block content %}
{% if username %}
<div class="jumbotron">
<div class="container">
<h3>Welcome, Dr {{ name }}</h3>
<p>You can manage your clinics here:</p>
<p><a class="btn btn-primary btn-sm" href="#" role="button">Learn more »</a></p>
</div>
</div>
{% if nodoc}
{% if clinics %}
{% for clinic in clinics %}
<div class="col-sm-8 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded">
<div class="card-body">
<div id="id" style="display: none;">{{ clinic.clinicid }} </div>
<h2 class="card-title">
{{ clinic.name}}
</a>
</h2>
<h6 class="card-subtitle mb-2 text-muted">Label: {{ clinic.label }}</h6>
<p class="card-text">Phone: {{ clinic.mobile }}</p>
<p class="card-text">About Clinic: {{ clinic.about }}</p>
<p class="card-text">Website: {{ clinic.website }}</p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/doctor/edit/{{ doc.docid }}" class="btn btn-primary mr-1 mybtndocedit" data-id="{{ doc.docid }}">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/doctor/appointments/{{ doc.docid }}" class="btn btn-primary mr-1 mybtnviewapp"
data-id="{{ doc.docid }}">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/doctor/appointment/add/{{ doc.docid }}" class="btn btn-primary mr-1 mybtnaddapp"
data-id="{{ doc.docid }}">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/doctor/remove/{{ doc.docid }}" class="btn btn-danger mr-1 mybtndel" data-id="{{ doc.docid }}">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="alert alert-danger" role="alert">
You are not a member of any clinic. If you are an administrator, you can add yourself to a clinic here.
</div>
{% endif %}
{% else %}
<div class="alert alert-danger" role="alert">
You are not registered as a doctor in the system. Please contact Support..
</div>
{% endif %}
{% else %}
<div class="container bg-light">
<p>You are not authorized. Please login.</p>
{% endif %}
</div>
{% endblock %}
This is clinic/clinicbase.html:
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% include "clinic/common_css.html" %}
{% block cssblock %}
{% endblock %}
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div id="navbar">
{% block navbar %}
{% include "clinic/topbar.html" with screen="newappointment" %}
{% endblock %}
</div>
<nav aria-label="breadcrumb">
<ol id="breadcrumb" class="breadcrumb">
{% block breadcrumb %}{% endblock %}
</ol>
</nav>
{% block content %}
{% endblock %}
{% include "clinic/common_js.html" %}
{% block jsblock %}
{% endblock %}
</body>
</html>
clinic/topbar.html:
<header>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="/"><i class="fas fa-plus"></i> Mysite</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-user-md"></i> Clinic
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/clinic/"><i class="fas fa-car"></i> Waiting Patients</a>
<a class="dropdown-item" href="/clinic/seen" id="BtnPatientsSeen"><i class="fas fa-check-square"></i>
Seen Patients</a>
<a class="dropdown-item" href="/clinic/newclinic" id="AddNewClinic"><i class="fas fa-check-square"></i>
Add new clinic</a>
<a class="dropdown-item" href="/clinic/clinics" id="ListClinics"><i class="fas fa-check-square"></i>
Show Clinics</a>
<a class="dropdown-item" href="/clinic/permissions" id="SetPermissions"><i class="fas fa-check-square"></i>
Set mapping and permissions</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-address-book"></i> Registration
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/clinic/register" id="registration"><i class="fas fa-clipboard"></i>
Register Patient</a>
<a class="dropdown-item" href="/clinic/checkin"><i class="fas fa-clipboard-check"></i> Checkin Patient</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" id="listRegistered" href="#"><i class="fas fa-list"></i> List Registered
Patients</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/appointments/getappointment" id="appointment"><i class="fas fa-calendar-plus"></i> Appointments
</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Welcome, {{ user.get_username }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'logout'%}?next={{request.path}}"><i class="fas fa-sign-out-alt"></i>
Logout</a>
<a class="dropdown-item" href="/clinic/myprofile"><i class="fas fa-user-alt"></i> My Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/appointments/myappointments"><i class="fas fa-calendar"></i> My Appointments</a>
</div>
</li>
{% else %}
<li class="nav-item active">
<a class="nav-link" href="{% url 'login'%}?next={{request.path}}"><i class="fas fa-key"></i> Login
</a>
</li>
{% endif %}
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
clinic/common_css.html:
{% load static %}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'clinic/css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/datepicker.0.6.5.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/fontawesome.5.2.0.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/jquery-ui/jquery-ui.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/jquery-ui/jquery-ui.structure.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/jquery-ui/jquery-ui.theme.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/fullcalendar.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/calcustomcolors.css' %}?dev={{ rnd_num }}">
<link rel="stylesheet" href="{% static 'appointments/propellor/typography.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/materialicons.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/button.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/floating-action-button.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/google-icons.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/mytheme.css' %}">
clinic/common_js.html:
{% load static %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="{% static 'appointments/js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'appointments/js/jquery-ui/jquery-ui.js' %}?dev={{ rnd_num }}"></script>
<script src="{% static 'appointments/js/popper.min.js' %}"></script>
<script src="{% static 'appointments/js/bootstrap.min.js' %}"></script>
<script src="{% static 'appointments/js/notify.0.4.2.js' %}"></script>
<script src="{% static 'appointments/js/datepicker.0.6.5.js' %}"></script>
<script src="{% static 'appointments/lib/moment.min.js' %}"></script>
<script src="{% static 'appointments/js/fullcalendar.js' %}"></script>
<script src="{% static 'appointments/js/search.js' %}?dev={{ rnd_num }}"></script>
<script src="{% static 'appointments/js/appointment.js' %}?dev={{ rnd_num }}"></script>
The error I get is:
In template /home/joel/myappointments/appointments/templates/clinic/index.1.html, error at line 60
Invalid block tag on line 60: 'else', expected 'endblock'. Did you forget to register or load this tag?
Is there an obvious bug in the template?

{% if nodoc} on line 12 - you're missing a %, this line should be {% if nodoc %}.