{% extends "header.html" %}
{% load crispy_forms_tags %}
{% csrf_token %} 
{% load menu_extras %} 
{% load static %}
{% block content %} 

{% if design.bgheader %}
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark" style="background-image: url({{design.bgheader.url}}); " id="nav">
{% else %}
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark" id="nav">
{% endif %}

    <div class="container">
      <a class="navbar-brand" href="#nav">{{design.cafename}}</a>
      <button class="navbar-toggler ms-auto justify-content-end" type="button" data-bs-toggle="collapse"
        data-bs-target="#n_bar" aria-controls="navbarNavAltMarkup" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="n_bar">
        <ul class="navbar-nav">
          {% for cat in all_sections %}
            <li class="nav-item"><a class="nav-link" href={{ "#"|add:cat.section }}>{{ cat.section }}</a></li>
          {% endfor %} 
        </ul>
      </div>
    </div>
  </nav>

  {% if design.bgup %}
    <div style="margin-top: -1px;"><img src="{{design.bgup.url}}" id="img" width="100%" height="auto"/></div>
  {% else %}
  <div style="margin-top: -1px;"><img src="{% static "bgup.png" %}" id="img" width="100%" height="auto"/></div>
  {% endif %}
  {% if design.bgcenter %}
    <section class="section-products block-page" style="background-image: url({{design.bgcenter.url}); background-repeat: no-repeat round; background-attachment: local, scroll; background-size: 100%; background-position: top; margin-top: -1px;">
  {% else %}
    <section class="section-products block-page" style="background-image: url({% static "bgrepeat.png" %}); background-repeat: no-repeat round; background-attachment: local, scroll; background-size: 100%; background-position: top; margin-top: -1px;">
  {% endif %}
    {% for cat in all_sections %}
      <div class="container">
        <div class="row justify-content-center text-center">
          <div class="col-md-8 col-lg-6">
            <div class="header" id="{{ cat.section }}">
              <h3>{{ cat.section }}</h3>
            </div>
          </div>
        </div>
        <div class="row">
          {% for q in all_items %}
            {% if cat.section == q.section.section and q.status == 'a' %}
              <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="single-product">
                  <div class="part-1 m-3">
                    <div class="card card-body bg-transparent my-auto" style="border: 1px solid {{design.fontcolor}};">
                      <h6 class="text-truncate" style="font-weight:600;">{{ q.name }}</h6>
                      {% if q.image %}<img src="{{q.image.url}}" class="card-img-top" id="card-image"/>
                      {% else %}<img src="{% static "Unknown.png" %}" class="card-img-top" id="card-image"/>
                      {% endif %}
                      <p class="small">{{ q.description }}</p>
                      {% if q.gramms %}<p class="small">{{ q.gramms }} грамм</p>{% endif %}
                      {% if q.calories %}<p class="small">{{ q.calories }} ккал</p>{% endif %}
                      <span class="float-left font-weight-bold">{{ q.price }} руб</span>
                    </div>
                  </div>
                </div>
              </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    {% endfor %}
  </section>
  {% if design.bgdown %}
    <div class="block-down" style="margin-top: -1px;"><img src="{{design.bgdown.url}}" id="img" width="100%" height="auto"/></div>
    {% else %}
    <div class="block-down" style="margin-top: -1px;"><img src="{% static "bgdown.png" %}" id="img" width="100%" height="auto"/></div>
  
    {% endif %}
  {% if design.bgend %}
    <footer class="text-white bg-image" style="background-image: url({{design.bgend.url}});">
  {% else %}
    <footer class="text-white bg-image bg-dark">
  {% endif %}
    <div class="container p-4">
      <div class="row justify-content-center text-centermt-4">
        <div class="p-3 text-white">
          © 2022 The Piano Cafe. All rights reserved.
          <a class="text-white" href="https://github.com/data-bases-team">github.com/data-bases-team</a>
          <!-- <img class="text-white" src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://virtual.fn11.bmstu.ru:3007">qr-code</a> -->
        </div>
      </div>
    </div>
  </footer>

{% endblock %}
