{% extends 'base.html' %}
{% block styles %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

     <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: top;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      @media (min-width: 992px) {
        .rounded-lg-3 { border-radius: .3rem; }
      }
    </style>


{% endblock %}
{% block content %}
<div id="popupBackdrop">
  <div class="loader">
      Встановлення компоненти... <i class="fa-solid fa-cog fa-spin fa-xl"></i>
  </div>
</div>

 {% if selected_component %}
<div class="text-center border-bottom">
    <img class="d-block mx-auto mb-4" src="{{ url_for('static', filename='img/logo-k2.png')}}" alt="" width="200">
    <h3 class="display-4 fw-bold">K2CloudERP-2.5.1.27</h3>
    <h1 class="display-4 fw-bold">{{selected_component.name|title}}</h1>
    <div class="col-lg-6 mx-auto">
      <p class="lead mb-4">{{selected_component.description|title}} -
      quickly design and customize responsive mobile-first components with Python and Bootstrap.
      </p>
        <p class="lead mb-4">Посилання на репозиторій: {{selected_component.git_link}}</p>
        <p class="lead mb-4">Версія: {{selected_component.version}}</p>
        <p class="lead mb-4">Розробка: K2 Cloud</p>
      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">

     <a href="/install_components/{{ selected_component.id }}"  id="installBtn" class="btn btn-primary btn-lg px-4 me-sm-3" onclick="showLoader()">Встановити компоненту</a>
      </div>
    </div>
    <div class="overflow-hidden" style="max-height: 30vh;">
      <div class="container px-5">
        <img src="https://corp2.eu/media/assets/images/service/k2cloud.jpg" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
      </div>
    </div>
  </div>

    {% else %}
    Помилка завантаження компоненти з сервера
    {% endif %}

<script>
function showLoader() {
  document.getElementById("popupBackdrop").style.display = "block";
}

function hideLoader() {
  document.getElementById("popupBackdrop").style.display = "none";
}

window.onload = function() {
  hideLoader();
};
</script>


{% endblock %}