{% extends 'layouts/base/base.html.twig' %}
{% import 'common/macros/stylesheet.html.twig' as stylesheet %}
{% import 'common/macros/statusBadge.html.twig' as statusBadge %}

{% block critical_css %}
    {{ parent() }}
    <style>
        {{ asset_content(asset('assets/css/critical/model_upload-critical.css')) }}
    </style>
{% endblock %}

{% block preload_style %}
    {{ parent() }}
    {{ stylesheet.preload('model_upload.css') }}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ stylesheet.generate('model_upload.css') }}
{% endblock %}

{% block body %}
    <div class="container-fluid p-0">
        <div class="row">
            <h1 class="h3 mb-3">Upload Image</h1>
        </div>

        <div class="row">
            <div class="col-8">
                <div class="card">
                    <div class="card-body">
                        {% include 'components/organisms/uploader/_uploader.html.twig' %}
                    </div>
                </div>
                <div id="status-image" class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Images Status</h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-responsive table-striped align-middle">
                            <thead>
                            <tr>
                                <th>State</th>
                                <th>Theme</th>
                                <th>State</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <table class="table-temp d-none">
                            <tr class="table-loading">
                                <td>
                                    <div class="theme-status">
                                        <div class="spinner-border text-secondary" role="status"></div>
                                    </div>
                                </td>
                                <td class="item-name">Name</td>
                                <td>
                                    <b>Uploading ...</b>
                                </td>
                            </tr>
                            <tr class="table-success">
                                <td>
                                    <div class="theme-status text-success">
                                        <i data-feather="check-circle" width="30" height="30"></i>
                                    </div>
                                </td>
                                <td class="item-name">Name</td>
                                <td class="text-success">
                                    <b>Uploadé</b>
                                </td>
                            </tr>
                            <tr class="table-danger">
                                <td>
                                    <div class="theme-status text-danger">
                                        <i data-feather="x-circle" width="30" height="30"></i>
                                    </div>
                                </td>
                                <td class="item-name">Name</td>
                                <td class="text-danger">
                                    <b>Erreur</b>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="card model-details">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Modèle Détails</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-group list-unstyled">
                            <li class="list-group-item"><strong>Réference :</strong> {{ model.reference }}</li>
                            <li class="list-group-item"><strong>Name :</strong> {{ model.name }}</li>
                            <li class="list-group-item"><strong>Status :</strong> {{ statusBadge.render(model.status) }}</li>
                        </ul>
                        <div class="d-flex justify-content-center mt-4">
                            <a class="btn btn-success text-white disabled" id="drive-sender" href="{{ path('drive_send', {id: model.id}) }}">
                                <i class="align-text-bottom" data-feather="send" width="15" height="15"></i>
                                Envoyer
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="drive-modal" class="modal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascript %}
{{ parent() }}
<script defer src="{{ asset('model_upload.js') }}"></script>
{% endblock %}