{% extends "new_layout.html" %}

{% block content %}
<div class="bg-danger bg-opacity-10">
<div class="container col-xxl-8 px-4 py-5">
    <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
      <div class="col-10 col-sm-8 col-lg-6">
        <img src="{{ url_for('static', filename='images/online_kassa.png') }}" class="d-block mx-lg-auto img-fluid" alt="ЭЦП в Клину, УЦ Калуга Астрал" width="300" height="200" loading="lazy">
      </div>
      <div class="col-lg-6">
        <h1 class="display-5 fw-bold lh-1 mb-3">#klintorg</h1>
        <p class="lead">Продажа, установка, подключение к программным продуктам, подключение к ОФД, регистрация и обслуживание онлайн-касс.</p>
        <div class="d-grid gap-2 d-md-flex justify-content-md-start">
          <!-- <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button> -->
          <!-- <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button> -->
          <button type="button" class="btn btn-primary my-2" data-bs-toggle="modal" data-bs-target="#exampleModal">Задать вопрос</button>
        </div>
      </div>
    </div>
</div>
</div>
<br/>
<br/>

<div class="container d-flex justify-content-center">
    
    <h2>Преимущества</h2>
    
</div>

<br/>
<br/>



<div class="container">
  <div class="row row-cols-1 row-cols-md-2 g-4">
    <div class="col">
      <div class="card h-100">
        <img src="{{ url_for('static', filename='images/integration.png' )}}" class="card-img-top h-75 w-75 rounded mx-auto d-block" alt="Интеграция ККТ с торговыми системами"><br/><br/><br/><br/>
        <div class="card-body">
          <h4 class="card-title text-success text-opacity-75">Интеграция ККТ с торговыми системами</h4><br/>
          <p class="card-text">Подключение к программам 1с, Фронтол. Автоматизация торговых точек.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100">
        <img src="{{ url_for('static', filename='images/ffd_kkt.png' ) }}" class="card-img-top h-75 w-75 rounded mx-auto d-block" alt="Поддержка ФФД 1.2 и Маркировка"><br/><br/>
        <div class="card-body">
          <h4 class="card-title text-success text-opacity-75">Соблюдение законодательства</h4><br/>
          <p class="card-text">Все наши кассы подготовлены для работы с ФФД 1.2 (маркировка).</p>

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

</div>

<br/>
<br/>
<br/>


<div class="container d-flex justify-content-center">
  
  <h3>Онлайн-кассы</h3>
  
</div>
<div class="container d-flex justify-content-center">
  
  <p>Свяжитесь с нами и мы подберем ту онлайн-кассу, которая подходит именно Вам.</p>
</div>

<br/>



{% for prod in product_kkt %}
<div class="container">
  <div class="card mb-3 shadow-sm">
    <div class="row g-0">
      <div class="col-md-8">
        <div class="card-body">
          <h3 class="card-title text-success text-opacity-75">{{ prod.name }}</h3>
          <p class="card-text">{{ prod.description }}</p>
          <p class="card-text" style="font-size: 24px; font-weight: bold;">{{ prod.price }} &#x20bd;</p>
          <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModal">
            Заказать
          </button>

        </div>
        
      </div>
      <div class="col-md-2"></div>
      <div class="col-md-2 d-flex flex-wrap align-items-center justify-content-center">
        <img src="{{ url_for('static', filename=prod.img) }}" class="img-fluid rounded-start" alt="{{prod.alt}}">
      </div>

    </div>
    
  </div>
</div>
<br/>
{% endfor %}


<br/>
<br/>
<br/>


<div class="container d-flex justify-content-center">
  
  <h3>Фискальные накопители</h3>
  
</div>
<div class="container d-flex justify-content-center">
  
  <p>Свяжитесь с нами и мы подберем необходимый Вам фискальный накопитель.</p>
</div>

<br/>


{% for prod in product_fn %}
<div class="container">
  <div class="card mb-3 shadow-sm">
    <div class="row g-0">
      <div class="col-md-8">
        <div class="card-body">
          <h3 class="card-title text-success text-opacity-75">{{ prod.name }}</h3>
          <p class="card-text">{{ prod.description }}</p>
          <p class="card-text" style="font-size: 24px; font-weight: bold;">{{ prod.price }} &#x20bd;</p>
          <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModal">
            Заказать
          </button>

        </div>
        
      </div>
      <div class="col-md-2"></div>
      <div class="col-md-2 d-flex flex-wrap align-items-center justify-content-center">
        <img src="{{ url_for('static', filename=prod.img) }}" class="img-fluid rounded-start" alt="{{prod.alt}}">
      </div>

    </div>
    
  </div>
</div>
<br/>
{% endfor %}



{% endblock%}