{% extends "layouts/base-electric.html" %}

{% load static %}

{% block title %}Browse{% endblock title %}

{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    {% include "includes/navigation-transparent.html" %}

    <div class="container-fluid"> 
        <div class="row row-gap-3 column-gap-0">
            
            <div class="col-xl-9 col-lg-8 pe-lg-0">
                <div class="e-container-border e-container-radius">
                    <div class="e-container e-container-radius p-2 pt-3 mb-3">
                        <h1 class="text-center">Browse</h1>

                        <hr>

                        {% include "includes/pageination.html" with page_obj=submissions %}

                        {% include "includes/gallery.html" with user_profile=user_profile %}

                        {% include "includes/pageination.html" with page_obj=submissions %}

                    </div>
                </div>
            </div>
            
            <div class="col-xl-3 col-lg-4">
                <div class="e-container-border e-container-radius d-none d-sm-none d-md-none d-lg-block ">
                    <div class="e-container e-container-radius p-2 pt-3 mb-3 ">
                        <h1 class="text-center">Search</h1>

                        <hr>

                        <form class="d-flex flex-column gap-2 bg-body-secondary p-2 rounded" role="search" method="get" action="{% url 'sites:browse' %}">

                            <div class="input-group">
                                {{ form.q }}
                                <button class="input-group-text nf nf-fa-search" id="search-addon" type="submit"></button>
                            </div>
                            
                            <div class="input-group">
                                <label class="input-group-text" for="type">{{ form.sort.label }}:</label>
                                <div class="form-control pt-2">
                                    {% for radio in form.sort %}
                                    <div class="form-check form-check-inline">
                                        <label for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
                                        <input class="form-check-input" type="radio" name="sort" value="{{ radio.data.value }}" id="{{ radio.id_for_label }}" {% if radio.data.selected %}checked{% endif %}>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>

                            <div class="input-group">
                                <label class="input-group-text" for="category">{{ form.category.label }}:</label>
                                {{ form.category }}
                            </div>

                            <div class="input-group">
                                <label class="input-group-text" for="mature">{{ form.mature.label }}:</label>
                                
                                <div class="form-control pt-2">
                                    
                                {% for radio in form.mature %}
                                    <div class="form-check form-check-inline">
                                        <label for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
                                        <input class="form-check-input" type="radio" name="mature" value="{{ radio.data.value }}" id="{{ radio.id_for_label }}" {% if radio.data.selected %}checked{% endif %}>
                                    </div>
                                {% endfor %}
                                
                                </div>
                            </div>

                        </form>

                        <hr>

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

        </div>
    </div>

{% endblock content %}