{% extends "base.html" %}
{% load static %}
{% load i18n %}

{% block styles %}
{{block.super}}
<link rel="stylesheet" type="text/css" href="{% static 'assets/css/bootstrap.min.css' %}" />

{% endblock %}

{% block layout %}

<div class="container justify-content-center text-center" style="margin-left: 20%;margin-top: 5%">
    <h1>OOPS!</h1>
    <img src="{% static 'assets/images/error.png' %}" class="img-fluid" alt="Responsive image" width="500px" height="500px">
        <h2>{% block error_heading %}{% trans 'Sorry!' %}{% endblock %}</h2>
        {% block error_message %}{% endblock %}
        <p>
            <a class="btn btn-primary btn-lg" href="#" onclick="javascript:history.go(-1);">{% trans 'Return to previous page' %}</a>
            <a class="btn btn-primary btn-lg" href="{{ homepage_url }}">{% trans "Go to homepage" %}</a>
        </p>
</div>
{% endblock %}