{% extends 'base.html' %}
{% load i18n %}

{% block content %}
<div class="container my-5" style="min-height: 70vh;">
  <div class="row justify-content-center align-items-center">
    <div class="col-md-6">
      <div class="card shadow-sm">
        <div class="card-body">
          <h3 class="card-title text-center mb-4">{% trans "You were successfully logged out." %}</h3>
          <p class="card-text text-center mb-4">{% trans "See you soon!" %}</p>
          <div class="d-flex justify-content-center align-items-center">
            <a href="{% url 'login' %}" class="btn btn-primary">{% trans "Go to the login page" %}</a>
          </div>
          <div class="d-flex justify-content-center align-items-center mt-3">
            <a href="{% url 'landing_page' %}" class="btn btn-outline-primary">{% trans "Main page" %}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  body {
    background-color: #f8f9fa;
  }
  .card {
    border-radius: 20px;
    border: none;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
  }
</style>
{% endblock %}