{% extends 'ndr_core/admin_views/base.html' %}
{% load static %}
{% load render_table from django_tables2 %}

{% block extra_css %}
    <style>
        .card {
            flex-direction: row;
            margin-bottom: 1.5em;
        }
        .card-title {
          font-weight: bold;
        }
        .card img {
          width: 30%;
        }
        .card-img-left {
            border-top-right-radius: 0;
            border-bottom-left-radius: calc(0.25rem - 1px);
        }
        .card-img-right {
            border-top-left-radius: 0;
            border-bottom-right-radius: calc(0.25rem - 1px);
        }

        @media only screen and (max-width: 768px) {
          a {
            display: none;
          }
          .card-body {
            padding: 0.5em 1.2em;
          }
          .card-body .card-text {
            margin: 0;
          }
          .card img {
            width: 50%;
          }
        }
        @media only screen and (max-width: 1200px) {
          .card img {
            width: 40%;
          }
        }
    </style>
{% endblock %}

{% block content %}

    <div class="card bg-light">
        <img src="{% static 'ndr_core/images/admin/dashboard/welcome.png' %}" class="card-img-top card-img-left" />
        <div class="card-body border d-flex align-items-start flex-column m-0">
            <div class="mb-auto p-2">
                <h5 class="card-title">Welcome to the NDR-Core administration interface</h5>
                <p class="card-text">
                    <ul>
                        <li>You have <strong>{{ new_messages }}</strong> <a href="{% url 'ndr_core:configure_messages' %}">new messages</a>.</li>
                <li>Your database has been searched <strong>{{ total_searches }}</strong> times.</li>
                    </ul>
                </p>
            </div>
            <div class="mb-0 p-0 w-100">
                <div class="container p-0 m-0">
                    <div class="row p-0 m-0">

                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}