{% extends 'base/base.html' %}
{% load static %}
{% block title %} Gallery {% endblock %}

{% block body %}
    {% include 'base/nav-bar.html' %}
    <div id="wrap">
        <div id="main">
        <div class="container">
            <h1>Gallery</h1>
            <div class="row">
                {% for object in object_list %}
                    <div class="col-md-6">
                        <img class="img" src="/static/media/{{ object.image }}">
                        <div class="div2">
                            <form method="post" action="{% url "image_delete" object.id %}">
                            {% csrf_token %}
                            <button type="submit" class="button">×</button>
                            </form>
                        </div>
                    </div>
                {% endfor %}
                        <div class="col-md-12">
                         <a href="{% url 'image_create' id %}">
                            <button type="submit" class="btn btn-primary add-btn">Add Image</button>
                         </a>
                        </div>
            </div>
        </div>
    </div>
</div>





    {% include 'base/footer.html' %}

    <style>

        .container {
            margin-top: 50px;
        }

        .img {
            height: 270px;
            width: 540px;
            padding: 10px;
        }

        .button {
            display: absolute;
            background-color: transparent;
            border: none;
            font-size: 25px;
         }

        .div2 {
            position: absolute;
            left: 518px;
            bottom: 234px;
        }

        .btn {
            margin-left: 20px;
            margin-top: 20px;

        }
    </style>
{% endblock %}