Templates app_fossils\templates\app_fossils

home.html

{% extends 'base.html' %}
{% block title %} Fossils homepage! {% endblock %}
{% load static %}
{% block content %}

<h2 class="text-center mb-4">Species</h2>

<nav aria-label="Navigation">
  <ul class="pagination justify-content-center mt-3 mb-3 text-center">
    {% if species.has_previous %}
      <li class="page-item"><a class="page-link" href="?page=1"><<</a></li>
      <li class="page-item"><a class="page-link" href="?page={{ species.previous_page_number }}"><</a></li>
    {% else %}
      <li class="page-item disabled"><a class="page-link"><<</a></li>
      <li class="page-item disabled"><a class="page-link"><</a></li>
    {% endif %}
  
    <li class="page-item dropdown">
      <button class="btn dropdown-toggle border rounded-0" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="min-width: 150px">
        {{ species.number }} / {{ species.paginator.num_pages }}
      </button>
      <ul class="dropdown-menu">
        {% for page_num in species.paginator.page_range %}
          {% if page_num == species.number %}
            <li><a class="dropdown-item active" href="?page={{ page_num }}">{{ page_num }}</a></li>
          {% else %}
            <li><a class="dropdown-item" href="?page={{ page_num }}">{{ page_num }}</a></li>
          {% endif %}
        {% endfor %}
      </ul>
    </li>
    {% if species.has_next %}
      <li class="page-item"><a class="page-link" href="?page={{ species.next_page_number }}">></a></li>
      <li class="page-item"><a class="page-link" href="?page={{ species.paginator.num_pages }}">>></a></li>
    {% else %}
      <li class="page-item disabled"><a class="page-link" href="#">></a></li>
      <li class="page-item disabled"><a class="page-link" href="#">>></a></li>
    {% endif %}
  </ul>
</nav>

{% if fossils_without_specie %}
  <a class="btn btn-outline-secondary position-relative" type="button" data-bs-toggle="offcanvas" href="#offcanvasNoSpecie" role="button" aria-controls="offcanvasNoSpecie">
    Fossil{{ fossils_without_specie.count|pluralize }} without species
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">{{ fossils_without_specie.count }}</span>
  </a>
  <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNoSpecie" aria-labelledby="offcanvasNoSpecieLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasNoSpecieLabel">Fossils without species</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
      {% for fossil in fossils_without_specie %}
        <a class="btn btn-sm btn-outline-secondary shadow-sm pt-0 pb-0" href="{% url 'fossil-selected' fossil.id %}">{{ fossil }}</a>
      {% endfor %}
    </div>
  </div>
{% endif %}
<hr>
{% if species %}
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 h-100 g-3" data-masonry='{"percentPosition": true }'>
    {% for specie in species %}
      <div class="col text-center">
        <div class="card p-0 border-0 shadow h-100" style="width: 100%; height: 100%;">
          <div class="container card-header p-0 shadow-sm bg-white" style="position: relative; display: flex; align-items: center; justify-content: center;">
            <a href="{% url 'species-selected' specie.id %}">
              <img {% if specie.species_image %}src="{{ specie.species_image.url }}"{% else %}src="{% static 'project/default.png' %}"{% endif %} alt="..." class="img-fluid rounded-0">
              <div style="position: absolute; top: 4px; left: 8px;">
                <span class="badge bg-light text-black"> {{ specie.calculate_number_of_fossils }}</span>
              </div>
              <div style="position: absolute; top: 4px;  right: 8px;">
                {% if specie.species_is_archived %}🔴{% else %}🟢{% endif %}
              </div>
              {% if specie.total_fossil_value != 0 %}
                <div style="position: absolute; bottom: 4px;  left: 8px;">
                  <span class="badge bg-dark text-white">£ {{ specie.total_fossil_value }}</span>
                </div>
              {% endif %}
              {% if specie.species_description %}
                <div style="position: absolute; bottom: 4px; right: 8px;">
                  <span class="badge bg-dark">📝</span>
                </div>
              {% endif %}
            </a>
          </div>
          <div class="card-body p-0 h-100">
            <small style="font-weight: bold;">
              <a href="{% url 'species-selected' specie.id %}" style="text-decoration: none; color: black;">{{ specie.species_name }}</a>
            </small>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
{% endif %}
{% endblock %}
{% block footer %}
<h6 class="text-center">Fossils </h6>
{% endblock %}

---

chart_multi.html

{% extends 'base.html' %}
{% block title %} Chart multi {% endblock %}
{% load static %}
{% block content %}

<canvas id="myChart"></canvas>

<script>
    var chart_data = {{ chart_data|safe }};
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
      type: 'bar',
      data: chart_data,
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            },
            id: 'y',
            position: 'left',
          }]
        },
        plugins: {
            title: {
                display: true,
                text: 'Display oldest, average and youngest age values for each specie'
            }
        },
      }
    });
  </script>

{% endblock %}

---

chart_simple.html

{% extends 'base.html' %}
{% block title %} Chart simple {% endblock %}
{% load static %}
{% block content %}

<canvas id="myChart"></canvas>

<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var chartData = {{ chart_data|safe }};
  var myChart = new Chart(ctx, {
      type: 'bar',
      data: chartData,
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          },
          plugins: {
              title: {
                  display: true,
                  text: 'Number of fossils in species'
              }
          },
      }
  });
</script>

{% endblock %}

---

event.html

{% extends 'base.html' %}
{% block title %} {{ event.event_name }} {% endblock %}
{% load static %}
{% block content %}

<a class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#FossilEventAddModal">Add fossil</a>
  
  <div class="modal fade" id="FossilEventAddModal" tabindex="-1" aria-labelledby="FossilEventAddModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title fs-5" id="FossilEventAddModalLabel">{{ event.event_name }}: add a fossil</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                {{ form_fossil_add.as_p }}
                <button class="save btn btn-sm btn-outline-secondary" type="submit" name='fossil_add'>Add</button> <a class="btn btn-sm btn-outline-secondary" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">Cancel</a>
            </form>
        </div>
      </div>
    </div>
  </div>

<a class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#Update_Popup_Modal">Update event</a>

    <div class="modal fade" id="Update_Popup_Modal" tabindex="-1" aria-labelledby="Update_Popup_ModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <h4 class="modal-title fs-5" id="Update_Popup_ModalLabel">Update {{ event.event_name }}</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    {{ form_event_update.as_p }}
                    <button class="save btn btn-sm btn-outline-secondary" type="submit" name='form_update'>Update</button> <a class="btn btn-sm btn-outline-secondary" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">Cancel</a>
                </form>
            </div>
        </div>
        </div>
    </div>    

<a class="btn btn-sm btn-outline-danger" type="button" data-bs-toggle="modal" data-bs-target="#Delete_Popup_Modal">Delete event</a>

<div class="modal fade" id="Delete_Popup_Modal" tabindex="-1" aria-labelledby="Delete_Popup_ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title fs-5" id="Delete_Popup_ModalLabel">Delete {{ event.event_name }}</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="alert alert-danger text-center" role="alert">
                <strong>Are you sure you want to delete {{ event.event_name }}?</strong>

            </div>
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                <button class="save btn btn-sm btn-outline-danger" type="submit" name='form_delete'>Delete</button> <a class="btn btn-sm btn-outline-secondary" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">Cancel</a>
            </form>
        </div>
        </div>
    </div>
</div>
<hr>
<h2 class="text-center">{{ event.event_name }}</h2>
<p class="text-center mb-4" style="font-size: small;">{{ event.event_date|date:'Y.m.d' }}</p>

{% if fossils %}
<table class="table table-hover table-sm" style="font-size: small;">
    <thead>
        <tr>
            <th class="h5 text-center p-3" scope="col" colspan="5">Fossils</th>
        </tr>
      <tr>
        <th>Update</th>
        <th scope="col">Fossil</th>
        <th scope="col">Date lent</th>
        <th scope="col">Date returned</th>
        <th scope="col">Notes</th>
      </tr>
    </thead>
    <tbody>
    {% for fossil_event in fossils %}
      <tr>
        <td><a class="btn btn-sm" href="{% url 'fossil-event-update' fossil_event.id %}">⚙️</a></td>
        <td><a href="{% url 'fossil-selected' fossil_event.fossil.id %}" style="text-decoration: none;">{{ fossil_event.fossil.fossil_name }}</a></td>
        <td>{{ fossil_event.fossil_lending_date|date:'Y.m.d' }}</td>
        <td>{% if fossil_event.fossil_lending_date_returned %}{{ fossil_event.fossil_lending_date_returned }}{% else %}<a href="{% url 'fossil-event-return' fossil_event.id %}" style="text-decoration: none;">Return</a>{% endif %}</td>
        <td>{{ fossil_event.fossil_lending_notes|slice:20 }}</td>
      </tr>

    {% endfor %}
    </tbody>
  </table>
{% endif %}

{% if event.event_notes %}
  <hr>
  <p><strong>Notes</strong>: {{ event.event_notes|linebreaks }}</p>
  <br>
{% endif %}

{% endblock %}

---

events.html

{% extends 'base.html' %}
{% block title %} Events {% endblock %}
{% load static %}
{% block content %}

<a class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#AddEventModal">➕ event</a>
  
  <div class="modal fade" id="AddEventModal" tabindex="-1" aria-labelledby="AddEventModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title fs-5" id="AddEventModalLabel">Add a new event</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            {{ form.as_p }}
            <button class="save btn btn-sm btn-outline-secondary" type="submit">Add</button> <a class="btn btn-sm btn-outline-secondary" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">Cancel</a>
          </form>
        </div>
      </div>
    </div>
  </div>
<hr>

<h2 class="text-center mb-4">Events</h2>
<table class="table table-hover table-sm" style="font-size: small;">
  <thead>
    <tr>
      <th scope="col">Event</th>
      <th scope="col">Date</th>
      <th scope="col">Fossils</th>
    </tr>
  </thead>
  <tbody>
    {% for event in events %}
    <tr>
      <td><a href="{% url 'event-selected' event.id %}" style="text-decoration: none;">{{ event.event_name }}</a></td>
      <td>{{ event.event_date|date:'Y.m.d' }}</td>
      <td>{{ event.fossils.all.count }}</td>
    </tr>
  {% endfor %}
  </tbody>
</table>

{% endblock %}

---

fossil_event_return.html

{% extends 'base.html' %}
{% block title %} Return fossil {% endblock %}
{% load static %}
{% block content %}

<div class="container" style="max-width: 450px;">
    <div class="card mt-5 text-center">
      <h5 class="card-header">Return fossil</h5>
      <div class="card-body">
        <form method="POST">
            {% csrf_token %}
            {{ form.as_p }}
          <button class="save btn btn-sm btn-outline-secondary" type="submit">Return</button> <a class="btn btn-sm btn-outline-secondary" href="{% url 'event-selected' fossil_event.event.id %}">Cancel</a>
        </form>
      </div>
    </div>
  </div>

{% endblock %}

---

fossil_event_update.html

{% extends 'base.html' %}
{% block title %} Update fossil event {% endblock %}
{% load static %}
{% block content %}

<div class="container" style="max-width: 700px;">
    <div class="card mt-5 text-center">
        <h5 class="card-header">Update fossil data for {{ fossil_event }} event</h5>
        <div class="card-body">
        <form method="POST">
            {% csrf_token %}
            {{ form_update.as_p }}
            <button class="save btn btn-sm btn-outline-secondary" type="submit" name='form_update'>Update</button> <a class="btn btn-sm btn-outline-danger" type="button" data-bs-toggle="modal" data-bs-target="#Delete_Popup_Modal">Delete</a> <a class="btn btn-sm btn-outline-secondary" href="{% url 'event-selected' fossil_event.event.id %}">Cancel</a>
        </form>
        </div>
    </div>
</div>

<div class="modal fade" id="Delete_Popup_Modal" tabindex="-1" aria-labelledby="Delete_Popup_ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title fs-5" id="Delete_Popup_ModalLabel">Delete fossil from this event</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body text-center">
            <div class="alert alert-danger" role="alert">
                <strong>Are you sure you want to remove {{ fossil_event.fossil.fossil_name }} from this event?</strong>
            </div>
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                <button class="save btn btn-sm btn-outline-danger" type="submit" name='form_delete'>Delete</button> <a class="btn btn-sm btn-outline-secondary" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">Cancel</a>
            </form>
        </div>
        </div>
    </div>
</div>

{% endblock %}

---

fossil.html

{% extends 'base.html' %}
{% block title %} {{ fossil.fossil_name }} {% endblock %}
{% load static %}

{% block content %}

<a class="btn btn-sm btn-outline-secondary" href="{% url 'fossil-update' fossil.id %}">Update</a>
<a class="btn btn-sm btn-outline-danger" href="{% url 'fossil-delete' fossil.id %}">Delete</a>
<a class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#Update_Popup_Modal">Update (popup)</a>

    <div class="modal fade" id="Update_Popup_Modal" tabindex="-1" aria-labelledby="Update_Popup_ModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                <h4 class="modal-title fs-5" id="Update_Popup_ModalLabel">Update {{ fossil.fossil_name }}</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="POST" enctype="multipart/form-data">
                        {% csrf_token %}
                        {{ form_fossil_update.as_p }}
                        {{ form_fossil_update.media }}
                        <button class="save btn btn-sm btn-outline-secondary" type="submit" name='fossil_update'>Update</button> <a class="btn btn-sm btn-outline-secondary" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">Cancel</a>
                    </form>
                </div>
            </div>
        </div>
    </div>    

<a class="btn btn-sm btn-outline-danger" type="button" data-bs-toggle="modal" data-bs-target="#Delete_Popup_Modal">Delete (popup)</a>

    <div class="modal fade" id="Delete_Popup_Modal" tabindex="-1" aria-labelledby="Delete_Popup_ModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title fs-5" id="Delete_Popup_ModalLabel">Delete {{ fossil.fossil_name }}</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <div class="alert alert-danger" role="alert">
                    <strong>Are you sure you want to delete this fossil?</strong>
                    <br><br>{{ fossil.fossil_name }}
                </div>
                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    <button class="save btn btn-sm btn-outline-danger" type="submit" name='fossil_delete'>Delete</button> <a class="btn btn-sm btn-outline-secondary" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">Cancel</a>
                </form>
            </div>
            </div>
        </div>
    </div>

<form method="POST" class="d-inline">
    {% csrf_token %}
    <button class="save btn btn-sm btn-outline-secondary" type="submit" name='fossil_favourite'>Favourite (on click)</button>
</form>

<a class="btn btn-sm btn-outline-secondary d-inline" data-bs-toggle="collapse" href="#collapse_Send_Email" role="button" aria-expanded="false" aria-controls="collapse_Send_Email" style="text-decoration: none;">Send fossil ▼</a>
<div class="collapse mt-3" id="collapse_Send_Email">
    <div class="card card-body p-1 border-0">
        <form method="POST">
            {% csrf_token %}
            <p>{{ form_send_email.email }}</p>
            <p>{{ form_send_email.subject }}</p>
            <p>{{ form_send_email.email_note }}</p>
            <p>{{ form_send_email.include_price }} Include price</p>
            <button class="save btn btn-sm btn-outline-secondary mt-3" type="submit" name='send_email'>Send</button>
        </form>
    </div>
</div>

<br><hr>

<h2 class="text-center mb-4">{{ fossil.fossil_name }} {% if fossil.fossil_is_favourite %}⭐{% endif %}</h2>

{% if fossil.fossil_image %}
    <a href="{{ fossil.fossil_image.url }}" target="_blank"><img class="img rounded mb-3" src="{{ fossil.fossil_image.url }}" alt="" style="max-width: 100px; max-height: 100px;"></a><br><br>
{% endif %}

{% if fossil.fossil_image_resized %}
    <a href="{{ fossil.fossil_image_resized.url }}" target="_blank"><img class="img rounded mb-3" src="{{ fossil.fossil_image_resized.url }}" alt="" style="max-width: 100px; max-height: 100px;"></a><br><br>
{% endif %}

{% if fossil.fossil_public_url %}
    <p><a href="{{ fossil.fossil_public_url.url }}" target="_blank" style="text-decoration: none;">🌐 Website</a></p>
{% endif %}

<p><strong>Species: </strong><a href="{% if fossil.fossil_species %}{% url 'species-selected' fossil.fossil_species.id %}{% endif %}" style="text-decoration: none;">{{ fossil.fossil_species|default:'-' }}</a></p>

<p><strong>Status: </strong>{{ fossil.fossil_status }}</p>

{% if fossil.fossil_age_in_years %}
    <p><strong>Age: </strong>{{ fossil.fossil_age_in_years }} year{{ fossil.fossil_age_in_years|pluralize }} ({{ fossil.fossil_age_mln }})</p>
{% endif %}

<p><strong>Value: </strong>{{ fossil.fossil_value|default:'0' }}</p>

<p><strong>Condition: </strong>{{ fossil.fossil_condition }}</p>

{% if fossil.fossil_date_acquired %}<p><strong>Date acquired: </strong>{{ fossil.fossil_date_acquired|date:'Y.m.d' }} ({{ fossil.fossil_collected_days_ago }} days ago)</p>{% endif %}

{% if fossil.fossil_size %}<p><strong>Size: </strong>{{ fossil.fossil_size }}</p>{% endif %}
{% if fossil.fossil_weight %}<p><strong>Weight: </strong>{{ fossil.fossil_weight }}</p>{% endif %}

<p><strong>Location: </strong>{{ fossil.fossil_location|default:'' }} 
    {% if fossil.fossil_location_latitude or fossil.fossil_location_longitude %}
        ({{ fossil.fossil_location_latitude|default:'' }} {{ fossil.fossil_location_longitude|default:'' }})
    {% endif %}
</p>

<p><strong>Collector's details: </strong>{{ fossil.fossil_collector }}</p>

<small>Created: {{ fossil.fossil_entry_created }}<br>Updated: {{ fossil.fossil_entry_updated }}</small>

{% if fossil.associated_fossils.all|length != 0 %}
    <hr>
    <div class="container-fluid mb-3"><strong>Associated fossils:</strong>
        {% for associated in fossil.associated_fossils.all %}
            <a class="btn btn-sm btn-outline-secondary shadow-sm pt-0 pb-0" href="{% url 'fossil-selected' associated.id %}" style="font-size: x-small;">{{ associated }}</a>
        {% endfor %}
    </div>
    <hr>
{% endif %}

{% if fossil.fossil_description_short %}
    <div class="container-fluid w-100 border mb-3">
        <p><strong>Short description: </strong>
        <small>{{ fossil.fossil_description_short|safe }}</small>
        </p>
    </div>
{% endif %}

{% if fossil.fossil_description_detailed %}
    <div class="container-fluid w-100 border mb-3">
        <p><strong>Detailed description: </strong>
        <small>{{ fossil.fossil_description_detailed|safe }}</small>
        </p>
    </div>
{% endif %}

{% if fossil.fossil_gathered %}
    <div class="container mt-3">
        Gathered from: <a href="{% url 'gathering-selected' fossil.fossil_gathered.id %}" style="text-decoration: none;">{{ fossil.fossil_gathered.gathering_name }}</a>
    </div>
{% endif %}

{% if events %}
    <div class="container mt-3">
        Used in events:
        <ul>
            {% for event in events %}
                <li><a href="{% url 'event-selected' event.id %}" style="text-decoration: none;">{{ event.event_name }}</a></li>
            {% endfor %}
        </ul>
    </div>
{% endif %}

{% endblock %}

---

fossils_add.html

{% extends 'base.html' %}
{% block title %} New fossil {% endblock %}
{% load static %}
{% block content %}

<div class="container" style="max-width: 700px;">
    <div class="card mt-3 text-center">
        <h5 class="card-header">Add a new fossil</h5>
        <div class="card-body">
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                {{ forms_fossil_add.as_p }}
                {{ forms_fossil_add.media }}
                <button class="save btn btn-sm btn-outline-secondary" type="submit">Add</button> <a class="btn btn-sm btn-outline-secondary" href="{% url 'homepage' %}">Cancel</a>
            </form>
        </div>
    </div>
</div>

{% endblock %}

---

fossils_delete.html

{% extends 'base.html' %}
{% block title %} Delete {{ fossil_to_delete.fossil_name }} {% endblock %}
{% load static %}
{% block content %}

<div class="container" style="max-width: 450px;">
  <div class="card mt-5 text-center">
    <h5 class="card-header">Delete {{ fossil_to_delete.fossil_name }}</h5>
    <div class="card-body">
      <p class="card-text alert alert-danger">Are you sure you want to delete {{ fossil_to_delete.fossil_name }}?</p>
      <form method="POST" action="{% url 'fossil-delete' fossil_to_delete.id %}">
        {% csrf_token %}
        <button class="save btn btn-sm btn-outline-danger" type="submit">Delete</button> <a class="btn btn-sm btn-outline-secondary" href="{% url 'fossil-selected' fossil_to_delete.id %}">Cancel</a>
      </form>
    </div>
  </div>
</div>

{% endblock %}

---

fossils_update.html

{% extends 'base.html' %}
{% block title %} Update {{ fossil_to_update.fossil_name }} {% endblock %}
{% load static %}
{% block content %}

<div class="container" style="max-width: 700px;">
    <div class="card mt-3 text-center">
        <h5 class="card-header">Update {{ fossil_to_update.fossil_name }}</h5>
        <div class="card-body">
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                {{ form_fossil_update.as_p }}
                {{ form_fossil_update.media }}
                <button class="save btn btn-sm btn-outline-secondary" type="submit">Update</button> <a class="btn btn-sm btn-outline-secondary" href="{% url 'fossil-selected' fossil_to_update.id %}">Cancel</a>
            </form>
        </div>
    </div>
</div>

{% endblock %}

---

gathering.html

{% extends 'base.html' %}
{% block title %} {{ gathering.gathering_name }} {% endblock %}
{% load static %}
{% block content %}

<a class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#UpdateGatheringModal">Update</a>
  
  <div class="modal fade" id="UpdateGatheringModal" tabindex="-1" aria-labelledby="UpdateGatheringModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title fs-5" id="UpdateGatheringModalLabel">Add a new gathering event</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            {{ form_gathering_update.as_p }}
            {{ form_gathering_update.media }}
            <button class="save btn btn-sm btn-outline-secondary" type="submit" name='gathering_update'>Add</button> <a class="btn btn-sm btn-outline-secondary" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">Cancel</a>
          </form>
        </div>
      </div>
    </div>
  </div>

<a class="btn btn-sm btn-outline-danger" type="button" data-bs-toggle="modal" data-bs-target="#Delete_Popup_Modal">Delete</a>
<div class="modal fade" id="Delete_Popup_Modal" tabindex="-1" aria-labelledby="Delete_Popup_ModalLabel" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-header">
          <h4 class="modal-title fs-5" id="Delete_Popup_ModalLabel">Delete {{ gathering.gathering_name }}</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center">
          <div class="alert alert-danger" role="alert">
              <strong>Are you sure you want to delete this gathering?</strong>
              <br><br>{{ gathering.gathering_name }}
          </div>
          <form method="POST" enctype="multipart/form-data">
              {% csrf_token %}
              <button class="save btn btn-sm btn-outline-danger" type="submit" name='gathering_delete'>Delete</button> <a class="btn btn-sm btn-outline-secondary" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">Cancel</a>
          </form>
      </div>
      </div>
  </div>
</div>
<hr>

<h2 class="text-center mb-4">Gathering in {{ gathering.gathering_name }} on {{ gathering.gathering_date|date:'Y.m.d' }}</h2>

<p><strong>Name</strong>: {{ gathering.gathering_name }}</p>
<p><strong>Date</strong>: {{ gathering.gathering_date|date:'Y.m.d' }}</p>
<p><strong>Image</strong>: {% if gathering.gathering_image %}
  <a href="{{ gathering.gathering_image.url }}" target="_blank" style="text-decoration: none;"><img src="{{ gathering.gathering_image.url }}" alt="" style="max-width: 30px; max-height: 20px;"></a>
  {% else %} - {% endif %}</p>
<p><strong>Description</strong>: {{ gathering.gathering_description|default:'-' }}</p>
<p><strong>Location</strong>: {{ gathering.gathering_location|default:'-' }}</p>
<p><strong>Geological Time</strong>: {{ gathering.gathering_location_geological_time|default:'-' }}</p>
<p><strong>Duration</strong>: {{ gathering.gathering_duration|default:'-' }}</p>
<p><strong>PDF</strong>: {% if gathering.gathering_pdf %} <a href="{{ gathering.gathering_pdf.url }}" style="text-decoration: none;" target="_blank">⬇️</a> {% else %}🔴{% endif %}</p>
<p><strong>Slug</strong>: {{ gathering.gathering_slug }}</p>
<p><strong>Fossils gathered:</strong></p>

<ul>
  {% for fossil in fossils %}
  <li><a href="{% url 'fossil-selected' fossil.id %}">{{ fossil }}</a></li>
  {% endfor %}
</ul>

{% endblock %}

---

gatherings.html

{% extends 'base.html' %}
{% block title %} Gatherings {% endblock %}
{% load static %}
{% block content %}

<a class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#AddGatheringModal">➕ gathering</a>
<a class="btn btn-sm btn-outline-secondary" href="{% url 'timeline-show' %}">Timeline</a><br>
  
  <div class="modal fade" id="AddGatheringModal" tabindex="-1" aria-labelledby="AddGatheringModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title fs-5" id="AddGatheringModalLabel">Add a new gathering event</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            {{ form_gathering_add.as_p }}
            <button class="save btn btn-sm btn-outline-secondary" type="submit">Add</button> <a class="btn btn-sm btn-outline-secondary" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">Cancel</a>
          </form>
        </div>
      </div>
    </div>
  </div>
<hr>

<h2 class="text-center mb-4">Gathering events</h2>

{% if user_gatherings %}
  <table class="table table-hover table-sm table-responsive" style="font-size: small;">
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Date</th>
          <th scope="col">Image</th>
          <th scope="col">Description</th>
          <th scope="col">Location</th>
          <th scope="col">Time</th>
          <th scope="col">Duration</th>
          <th scope="col">PDF</th>
          <th scope="col">Slug</th>
        </tr>
      </thead>
      <tbody>
      {% for gathering in user_gatherings %}
        <tr>
          <td><a href="{% url 'gathering-selected' gathering.id %}" style="text-decoration: none;">{{ gathering.gathering_name }}</a></td>
          <td>{{ gathering.gathering_date|date:'Y.m.d' }}</td>
          <td>{% if gathering.gathering_image %}<img src="{{ gathering.gathering_image.url }}" alt="" style="max-width: 30px; max-height: 20px;">{% else %} - {% endif %}</td>
          <td>{{ gathering.gathering_description|default:'-' }}</td>
          <td>{{ gathering.gathering_location|default:'-' }}</td>
          <td>{{ gathering.gathering_location_geological_time|default:'-' }}</td>
          <td>{{ gathering.gathering_duration|default:'-' }}</td>
          <td>{% if gathering.gathering_pdf %}🟢{% else %}🔴{% endif %}</td>
          <td>{{ gathering.gathering_slug }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
{% endif %}

{% endblock %}

---

print_pdf.html

{% extends 'base_clean.html' %}
{% block title %} Print PDF {% endblock %}
{% load static %}
{% block content %}

<h1 class="container text-center">Fossils</h1>

<table class="table">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Age</th>
        <th scope="col">Value</th>
      </tr>
    </thead>
    <tbody>
        {% for fossil in fossils %}
            <tr>
                <td>{{ fossil.fossil_name }}</td>
                <td>{{ fossil.fossil_age_mln }}</td>
                <td>{{ fossil.fossil_value|default:'' }}</td>
            </tr>
        {% endfor %}
    </tbody>
  </table>

{% endblock %}

---

search_result.html

{% extends 'base.html' %}
{% block title %} Search result {% endblock %}
{% load static %}
{% block content %}

{% if species_result %}
    <h3>Species</h3>
    <ul>
        {% for specie in species_result %}
            <li><a href="{% url 'species-selected' specie.id %}">{{ specie.species_name }}</a></li>
        {% endfor %}
    </ul>
{% else %}
    <small>No result in species</small><br><br>
{% endif %}

{% if fossils_result %}
    <h3>Fossils</h3>
    <ul>
        {% for fossil in fossils_result %}
            <li><a href="{% url 'fossil-selected' fossil.id %}">{{ fossil.fossil_name }}</a></li>
        {% endfor %}
    </ul>
{% else %}
    <small>No result in fossils</small><br><br>
{% endif %}

{% endblock %}

---

select_image.html

{% extends 'base.html' %}
{% block title %} Selected image {% endblock %}
{% load static %}
{% block content %}

<form method="post">
  {% csrf_token %}
  {{ form.as_p }}
  <button class="btn btn-sm btn-outline-secondary" type="submit">Submit</button>
</form>

{% endblock %}

---

species_add.html

{% extends 'base.html' %}
{% block title %} New species {% endblock %}
{% load static %}
{% block content %}

<h2 class="text-center">Option 1: form as_p</h2>

<div class="container" style="max-width: 700px;">
    <div class="card mt-3 text-center">
        <h5 class="card-header">Add a new species</h5>
        <div class="card-body">
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                {{ form_species_add.as_p }}
                {{ form_species_add.media }}
                <button class="save btn btn-sm btn-outline-secondary" type="submit">Add</button> <a class="btn btn-sm btn-outline-secondary" href="{% url 'homepage' %}">Cancel</a>
            </form>
        </div>
    </div>
</div>

<br><hr><br>
<h2 class="text-center">Option 2: add individual fields separately</h2>

<div class="container" style="max-width: 700px;">
    <div class="card mt-3 text-center">
        <h5 class="card-header">Add a new species</h5>
        <div class="card-body">
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                {{ form_species_add.media }}
                {{ form_species_add.species_name }}
                <div class="row mt-3">
                    <div class="col col-4"><strong>File</strong>{{ form_species_add.species_image }}
                        <br><br>{{ form_species_add.species_is_archived }} archived
                        <br><br>{{ form_species_add.captcha }}
                    </div>
                    <div class="col col-8"><strong>Description</strong>{{ form_species_add.species_description }}</div>
                </div>
                <br>
                <button class="save btn btn-sm btn-outline-secondary" type="submit">Add</button> <a class="btn btn-sm btn-outline-secondary" href="{% url 'homepage' %}">Cancel</a>
            </form>
        </div>
    </div>
</div>

{% endblock %}

---

species.html

{% extends 'base.html' %}
{% block title %} {{ specie.species_name }} {% endblock %}
{% load static %}
{% block content %}

<a class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#Update_Popup_Modal">Update</a>
  <div class="modal fade" id="Update_Popup_Modal" tabindex="-1" aria-labelledby="Update_Popup_ModalLabel" aria-hidden="true">
      <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
          <h4 class="modal-title fs-5" id="Update_Popup_ModalLabel">Update {{ specie.species_name }}</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body text-center">
              <form method="POST" enctype="multipart/form-data">
                  {% csrf_token %}
                  {{ form_species_update.as_p }}
                  {{ form_species_update.media }}
                  <button class="save btn btn-sm btn-outline-secondary" type="submit" name='species_update'>Update</button> <a class="btn btn-sm btn-outline-secondary" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">Cancel</a>
              </form>
          </div>
      </div>
      </div>
  </div>    

<a class="btn btn-sm btn-outline-danger" type="button" data-bs-toggle="modal" data-bs-target="#Delete_Popup_Modal">Delete</a>
  <div class="modal fade" id="Delete_Popup_Modal" tabindex="-1" aria-labelledby="Delete_Popup_ModalLabel" aria-hidden="true">
      <div class="modal-dialog">
          <div class="modal-content">
          <div class="modal-header">
              <h4 class="modal-title fs-5" id="Delete_Popup_ModalLabel">Delete {{ specie.species_name }}</h4>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body text-center">
              <div class="alert alert-danger" role="alert">
                  <strong>Are you sure you want to delete this species?</strong>
                  <br><br>{{ specie.species_name }}
              </div>
              <form method="POST" enctype="multipart/form-data">
                  {% csrf_token %}
                  <button class="save btn btn-sm btn-outline-danger" type="submit" name='species_delete'>Delete</button> <a class="btn btn-sm btn-outline-secondary" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">Cancel</a>
              </form>
          </div>
          </div>
      </div>
  </div>

<hr>

<h2 class="text-center mb-1">{{ specie.species_name }}</h2>

<div class="container text-center mb-3">
<span class="badge text-bg-info" style="font-weight: normal; font-size: x-small;">Value: £{{ specie.total_fossil_value }}</span>
<span class="badge text-bg-info" style="font-weight: normal; font-size: x-small;">Fossils: {{ specie.calculate_number_of_fossils }}</span>
</div>

{% if fossils %}
  <table class="table table-hover table-sm" style="font-size: small;">
    <thead>
      <tr>
        <th scope="col">
          <a href="?ordering=fossil_image_resized" style="text-decoration: none;">
            🖼️ {% if ordering == 'fossil_image_resized' %}▲ {% elif ordering == '-fossil_image_resized' %}▼ {% else %}⇅ {% endif %}
          </a>
        </th>
        <th scope="col">
          <a href="?ordering=fossil_name" style="text-decoration: none;">
            Fossil {% if ordering == 'fossil_name' %}▲ {% elif ordering == '-fossil_name' %}▼ {% else %}⇅ {% endif %}
          </a>
        </th>
        <th scope="col">
          <a href="?ordering=fossil_age_in_years" style="text-decoration: none;">
            Age {% if ordering == 'fossil_age_in_years' %}▲ {% elif ordering == '-fossil_age_in_years' %}▼ {% else %}⇅ {% endif %}
          </a>
        </th>
        <th scope="col">
          <a href="?ordering=fossil_condition" style="text-decoration: none;">
            Condition {% if ordering == 'fossil_condition' %}▲ {% elif ordering == '-fossil_condition' %}▼ {% else %}⇅ {% endif %}
          </a>
        </th>
        <th scope="col">
          <a href="?ordering=fossil_value" style="text-decoration: none;">
            Value {% if ordering == 'fossil_value' %}▲ {% elif ordering == '-fossil_value' %}▼ {% else %}⇅ {% endif %}
          </a>
        </th>
      </tr>
    </thead>
    <tbody>
      {% for fossil in fossils %}
        <tr>
          <td style="width: 50px;"><img {% if fossil.fossil_image_resized %} src="{{ fossil.fossil_image_resized.url }}" {% else %} src="{% static 'project/default.png' %}"{% endif %} alt="" style="max-width: 30px; max-height: 30px;"></td>
          <td><a href="{% url 'fossil-selected' fossil.id %}" style="text-decoration: none;">{{ fossil.fossil_name }}</a></td>
          <td>{{ fossil.fossil_age_mln|default:'' }}</td>
          
          <td>{{ fossil.fossil_condition }}</td>
          <td>{{ fossil.fossil_value|default:'' }}</td>
        </tr>
      {% endfor %}

    </tbody>
  </table>

  <div class="container text-center">
    {% if ordering != 'fossil_name' %}
      <a href="{% url 'species-selected' specie.id %}?reset=True"><span class="badge rounded-pill text-bg-danger" style="font-weight: normal;">Reset sorting</span></a>
    {% endif %}
  </div>

  <nav aria-label="Navigation">
    <ul class="pagination justify-content-center mt-3 mb-3 text-center">
      {% if fossils.has_previous %}
        <li class="page-item"><a class="page-link" href="?page=1"><<</a></li>
        <li class="page-item"><a class="page-link" href="?page={{ fossils.previous_page_number }}"><</a></li>
      {% else %}
        <li class="page-item disabled"><a class="page-link"><<</a></li>
        <li class="page-item disabled"><a class="page-link"><</a></li>
      {% endif %}
    
      <li class="page-item dropdown">
        <button class="btn dropdown-toggle border rounded-0" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="min-width: 150px">
          {{ fossils.number }} / {{ fossils.paginator.num_pages }}
        </button>
        <ul class="dropdown-menu">
          {% for page_num in fossils.paginator.page_range %}
            {% if page_num == fossils.number %}
              <li><a class="dropdown-item active" href="?page={{ page_num }}">{{ page_num }}</a></li>
            {% else %}
              <li><a class="dropdown-item" href="?page={{ page_num }}">{{ page_num }}</a></li>
            {% endif %}
          {% endfor %}
        </ul>
      </li>
      
      {% if fossils.has_next %}
        <li class="page-item"><a class="page-link" href="?page={{ fossils.next_page_number }}">></a></li>
        <li class="page-item"><a class="page-link" href="?page={{ fossils.paginator.num_pages }}">>></a></li>
      {% else %}
        <li class="page-item disabled"><a class="page-link" href="#">></a></li>
        <li class="page-item disabled"><a class="page-link" href="#">>></a></li>
      {% endif %}
    </ul>
  </nav>
{% endif %}

{% endblock %}

---

timeline.html

{% extends 'base.html' %}
{% block title %} Timeline {% endblock %}
{% load static %}
{% block content %}

{% if dates %}
<div style="position: absolute; left: 50%; font-size: small;">
    <div style="position: absolute; top: 0; height: {{ div_height }}px; width: 4px; background-color: black;"></div>
        {% for date in dates %}
            {% if forloop.counter|divisibleby:2 %}

                <a type="button" data-bs-toggle="modal" data-bs-target="#date{{ forloop.counter }}Modal"><div class="border border-dark rounded bg-white" style="position: absolute; top: {{ date.days_ago }}px; left: -15px; width: 245px;">
                    <div class="ms-5"><strong>{{ date.gathering_date|date:'Y.m.d' }}</strong><br>{{ date.gathering_name|slice:28 }}</div>
                </div></a>
            {% else %}
            <a type="button" data-bs-toggle="modal" data-bs-target="#date{{ forloop.counter }}Modal"><div class="border border-dark rounded bg-white text-end" style="position: absolute; top: {{ date.days_ago }}px; left: -230px; width: 245px;">
                    <div class="me-5"><strong>{{ date.gathering_date|date:'Y.m.d' }}</strong><br>{{ date.gathering_name|slice:28 }}</div>
                </div></a>
            {% endif %}
            {% if date == last_item %}
            <div style="position: absolute; top: {{ div_large }}px;"> </div>
            {% endif %}

            <div class="modal fade" id="date{{ forloop.counter }}Modal" tabindex="-1" aria-labelledby="date{{ forloop.counter }}ModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title fs-5" id="date{{ forloop.counter }}ModalLabel">{{ date.gathering_date|date:'Y.m.d' }}</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="card text-center">

                        <div class="card-header">
                            <h5 class="card-title">{{ date.gathering_name }}</h5>
                        </div>
                        {% if date.gathering_description %}
                            <div class="card-body">
                                {{ date.gathering_description|safe }}
                            </div>
                        {% endif %}
                        <div class="card-footer">
                            <small class="card-text" style="font-size: small;">{{ date.days_ago }} days ago</small>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
        {% endfor %}
</div>
{% endif %}
{% endblock %}

---

tools.html

{% extends 'base.html' %}
{% block title %} Tools {% endblock %}
{% load static %}
{% block content %}

<div class="text-center mt-4">
    <a class="btn btn-sm btn-outline-secondary mb-2 w-50" href="{% url 'select-image' %}">Image as selection</a><br>
    <a class="btn btn-sm btn-outline-secondary mb-2 w-50" href="{% url 'my-text' %}">HTTPResponse Text</a><br>
    <a class="btn btn-sm btn-outline-secondary mb-2 w-50" href="{% url 'my-html' %}">HTTPResponse HTML</a><br>
    <a class="btn btn-sm btn-outline-secondary mb-2 w-50" href="{% url 'about' %}">About (access html directly from urls.py)</a><br>
</div>

{% endblock %}

---

user_profile.html

{% extends 'base.html' %}
{% block title %} Profile {% endblock %}
{% load static %}
{% block content %}

<h2 class="text-center mb-4">CUSTOM PROFILE MODEL</h2>

<ul>
    <li><strong>User</strong>: {{ user.profile.user }}</li>
    {% if user.profile.user_avatar %}<li><strong>Avatar</strong>: <img src="{{ user.profile.user_avatar.url }}" alt="" style="max-width: 20px; max-height: 20px;"></li>{% endif %}
    <li><strong>Additional email</strong>: {{ user.profile.user_additional_email }}</li>
    {% if user.profile.user_website %}<li><strong>Website</strong>: <a href="{{ user.profile.user_website.url }}">{{ user.profile.user_website }}</a></li>{% endif %}
</ul>
<br>
<div class="container text-center" style="max-width: 500px">
    <div class="card">
        <h5 class="card-header">Update profile</h5>
        <div class="card-body">
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                {{ form_custom_profile.as_p }}
                {{ form_custom_profile.media }}
                <button class="save btn btn-sm btn-outline-secondary w-100" type="submit" name="user_custom_profile">{{ option }}</button>
            </form>
        </div>
        <div class="card-footer text-muted" style="font-size: x-small;">
            {% if user.profile %} Profile exists and can be updated {% else %} Profile hasn't been created yet {% endif %}
        </div>
    </div>
</div>

<br><hr><br>
<h2 class="text-center mb-4">AllAuth shortcuts</h2>

<ul>
    <li><strong>Register</strong>: <a href="{% url 'account_signup' %}" style="text-decoration: none;">account_signup</a></li>
    <li><strong>Login</strong>: <a href="{% url 'account_login' %}" style="text-decoration: none;">account_login</a></li>
    <li><strong>Logout</strong>: <a href="{% url 'account_logout' %}" style="text-decoration: none;">account_logout</a></li>
    <li><strong>Reset password</strong>: <a href="{% url 'account_reset_password' %}" style="text-decoration: none;">account_reset_password</a></li>
    <li><strong>Update email</strong>: <a href="{% url 'account_email' %}" style="text-decoration: none;">account_email</a></li>
</ul>

<br><hr><br>
<h2 class="text-center mb-4">Built-In Django USER MODEL</h2>

<ul>
    <li><strong>Username</strong>: {{ user.username }}</li>
    <li><strong>Password</strong>: {{ user.password|slice:20 }} ...</li>
    <li><strong>Email</strong>: {{ user.email }}</li>
    <li><strong>First name</strong>: {{ user.first_name }}</li>
    <li><strong>Last name</strong>: {{ user.last_name }}</li>
    <li><strong>Is staff</strong>: {% if user.is_staff %} 🟢 {% else %} 🔴 {% endif %}</li>
    <li><strong>Is active</strong>: {% if user.is_active %} 🟢 {% else %} 🔴 {% endif %}</li>
    <li><strong>Date joined</strong>: {{ user.date_joined }}</li>
    <li><strong>Last login</strong>: {{ user.last_login }}</li>
</ul>
<br>

<div class="container text-center" style="max-width: 500px">
    <div class="card">
        <h5 class="card-header">EDIT</h5>
        <div class="card-body">
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                {{ form_django_user_model.as_p }}
                <button class="save btn btn-sm btn-outline-secondary w-100" type="submit" name="django_user_model">Update</button>
            </form>
        </div>
        <div class="card-footer text-muted" style="font-size: x-small;">
            As we use the Django AllAuth in our project we do not need the django password reset form.
        </div>
    </div>
</div>

{% endblock %}

---