{% extends "base.html" %}

{% block styles %}
<style>
    .table {
        border-collapse: collapse;
        width: 100%;
    }

    .table th, .table td {
        text-align: left;
        padding: 8px;
        border-bottom: 1px solid #ddd;
    }

    .table tr:hover {
        background-color: #f5f5f5;
    }

    .search-form {
        margin-bottom: 20px;
    }

    .search-form .input-group {
        width: 300px;
    }

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

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


</style>
{% endblock %}

{% block content %}
<h1>K2CloudERP-2.5.1.27</h1>
<p>Вітаємо, <b>{{ username }}</b>, <a href="/logout">вихід</a></p>

<h2>Встановлені компоненти</h2>

<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Version</th>
            <th>Dependencies</th>
            <th>Git Link</th>
            <th>Install At</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>

    <tbody>
    <tr>
        <td colspan="8">k2root</td></tr>
        {% for component in components %}
        <tr>
            <td>{{ component.name }}</td>
            <td>{{ component.description }}</td>
            <td>{{ component.version }}</td>
            <td>{{ component.dependencies }}</td>
            <td>{{ component.git_link }}</td>
            <td>{{ component.date_installed }}</td>
            <td>
                {% if component.installed %}
                Yes
                {% else %}
                No
                {% endif %}
            </td>
            <td>
                {% if component.installed %}
                <a href="/remove_dependencies/{{ component.id }}" class="btn btn-primary">Вимкнути</a>
                {% else %}
                <a href="/add_dependencies/{{ component.id }}" class="btn btn-primary">Увімкнути</a>
                <!-- Button trigger modal -->
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#components-{{ component.id }}">
 Видалити
</button>

<!-- Modal -->
<div class="modal fade" id="components-{{ component.id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Видалити компоненту?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <a href="/remove-component/{{ component.id }}" class="btn btn-danger">Видалити</a>
      </div>
    </div>
  </div>
</div>




                {% endif %}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>






<div class="container px-4 py-5" id="hanging-icons">
    <h2 class="pb-2 border-bottom">Магазин компонент</h2>
    <form action="{{ url_for('components.dashboard') }}" method="GET" class="search-form">
    <div class="input-group">
        <input type="text" name="search_query" class="form-control" placeholder="Search components">
        <button type="submit" class="btn btn-primary">Search</button>
    </div>
</form>


    <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
        {% if component_server %}
        {% for component in component_server %}
        <div class="col d-flex align-items-start">
            <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
                <img class="d-block mx-auto mb-4" src="/static/img/logo-k2.png" alt="" width="60">
            </div>
            <div>
                <h2>{{ component.name|title }}</h2>
                <p>{{ component.description }}</p>
                <p>ВЕРСІЯ {{ component.version }}</p>
                {% if component.name in components_names %}
                <button type="button" class="btn btn-success">Installed</button>
                {% else %}
                <a href="/show_components/{{ component.id }}" class="btn btn-primary">Install</a>
                {% endif %}
            </div>
        </div>
        {% endfor %}
        {% else %}
        <div class="col">
            <p>No components available.</p>
        </div>
        {% endif %}
    </div>
</div>

{% endblock %}