{% extends 'layouts/admin/admin.html.twig' %}

{% block title %}Admin - {{ context.get['app'] ? context.get['app'].name : company_name }} - {{ title }}{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('admin/libs/blueimp-gallery/gallery.css') }}">
    <link rel="stylesheet" href="{{ asset('admin/libs/blueimp-gallery/gallery-indicator.css') }}">
{% endblock %}
{% block body %}
    <h4 class="font-weight-bold py-3 mb-0">{{ title }}</h4>
    <div class="text-muted small mt-0 mb-4 d-block breadcrumb">
        {{ fil_arial_admin_categories(title, 'Blogs', '') }}
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5><i class="feather icon-folder mr-1"></i>Fiche blog</h5>
                </div>
                <div class="card-body topic-name">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <h4 class="d-inline-block mb-0">{{ blog.name }}</h4>
                        </div>
                    </div>
                </div>
                <div class="bg-light-green-alt p-3">
                    <div class="row align-items-center">
                        <div class="col-md-12 btn-page">
                            <a href="{{ path('admin.blogs.new') }}" class="btn btn-secondary text-uppercase"><i class="mr-2 feather icon-plus"></i>Nouvelle blog</a>
                            <a href="{{ path('admin.blogs.edit', {'id': blog.id}) }}" class="btn btn-secondary text-uppercase"><i class="mr-2 feather icon-edit"></i>Modifier la blog</a>
                            <a href="{{ path('admin.blogs.index') }}" class="btn btn-secondary text-uppercase"><i class="mr-2 feather icon-list"></i>Liste des blogs</a>
                        </div>
                    </div>
                </div>
                <div class="card-body hd-detail hdd-admin border-bottom">
                    <div class="row">
                        <div class="col-auto text-center">
                            {% if blog.filename %}
                                <img class="media-object wid-60 img-radius mb-2" src="{{ vich_uploader_asset(blog, 'imageFile') | imagine_filter('small') }}" height="60" width="60" alt="{{ blog.name }}">
                            {% else %}
                                <img  class="media-object wid-60 img-radius mb-2" src="{{ asset('admin/img/empty.jpg') }}" height="60" width="60" alt="{{ blog.name }}">
                            {% endif %}
                            {#<p><i class="fas fa-thumbs-up mr-1 text-primary"></i>4</p>#}
                        </div>
                        <div class="col">
                            <div class="comment-top">
                                <h4><small class="text-muted f-w-400">ID: </small> {{ blog.id ?? '-------------' }}</h4>
                                <p>Ajouté par {{ blog.user.username }} {{ blog.createdAt|ago }}</p>
                            </div>
                            <div class="comment-content">
                                <p class="text-justify">{{ blog.extrait|nl2br }}</p>
                            </div>
                        </div>
                        <div class="col-auto pl-0 col-right">
                            <div class="card-body text-center">
                                <ul class="list-unstyled mb-0 edit-del">
                                    <li class="d-inline-block f-20 mr-1"><a href="{{ path('admin.blogs.edit', {'id': blog.id}) }}"><i class="feather icon-edit-2 text-muted"></i></a></li>
                                    <li class="d-inline-block f-20">{% include 'admin/blogs/_delete_form.html.twig' %}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="nav-tabs-top nav-responsive-sm">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#item-overview">Détails</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#item-content">Description</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#item-images">Images</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#item-comments">Commentaires</a>
                    </li>
                </ul>
                <div class="tab-content">

                    <!-- Details -->
                    <div class="tab-pane fade show active" id="item-overview">

                        <div class="row no-gutters row-bordered">
                            <div class="d-flex col-md-6 col-lg align-items-center">
                                <div class="card-body d-flex align-items-center">
                                    <div>
                                        <div class="ui-stars text-large text-nowrap">
                                            <div class="ui-star filled">
                                                <i class="ion ion-md-star"></i>
                                                <i class="ion ion-md-star"></i>
                                            </div>
                                            <div class="ui-star filled">
                                                <i class="ion ion-md-star"></i>
                                                <i class="ion ion-md-star"></i>
                                            </div>
                                            <div class="ui-star filled">
                                                <i class="ion ion-md-star"></i>
                                                <i class="ion ion-md-star"></i>
                                            </div>
                                            <div class="ui-star filled">
                                                <i class="ion ion-md-star"></i>
                                                <i class="ion ion-md-star"></i>
                                            </div>
                                            <div class="ui-star half-filled">
                                                <i class="ion ion-md-star"></i>
                                                <i class="ion ion-md-star"></i>
                                            </div>
                                        </div>
                                        <a href="javascript:void(0)" class="d-block text-muted small">{{ pluralize(blog.commentaire.count, 'avi') }}</a>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex col-md-6 col-lg align-items-center">
                                <div class="card-body d-flex align-items-center">
                                    <div class="lnr lnr-earth display-4 text-secondary"></div>
                                    <div class="ml-3">
                                        <div class="text-muted small line-height-1">Vue(s)</div>
                                        <div class="text-xlarge">{{ blog.view ?? 0 }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex col-md-6 col-lg align-items-center">
                                <div class="card-body d-flex align-items-center">
                                    <div class="lnr lnr-heart display-4 text-secondary"></div>
                                    <div class="ml-3">
                                        <div class="text-muted small line-height-1">Aimé(s)</div>
                                        <div class="text-xlarge">3,671</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr class="m-0">

                        <div class="card-body">
                            <h6 class="small font-weight-semibold mb-4">Infos basic</h6>
                            <div class="table-responsive">
                                <table class="table blog-item-table">
                                    <tbody>
                                    <tr>
                                        <td width="150">Categorie:</td>
                                        <td>{{ blog.categories.name }}</td>
                                    </tr>
                                    <tr>
                                        <td width="150">Etat:</td>
                                        <td>
                                            {% if blog.online %}
                                                <span class="badge badge-success">Publié</span>
                                            {% else %}
                                                <span class="badge badge-danger">Non publié</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <hr class="m-0">

                        <div class="card-body blog-item-table">
                            <h6 class="small font-weight-semibold mb-4">Meta</h6>
                            <div class="table-responsive">
                                <table class="table">
                                    <tbody>
                                    <tr>
                                        <td width="150">Titre:</td>
                                        <td>{{ blog.name }}</td>
                                    </tr>
                                    <tr>
                                        <td width="150">Mots clés:</td>
                                        <td>A voir</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                    <!-- / Details -->

                    <!-- Description -->
                    <div class="tab-pane fade" id="item-content">
                        <div class="card-body p-5">
                            <div class="row">
                                <div class="col-md">
                                    <p class="text-muted">{{ blog.content ? blog.content|raw : 'Aucune content' }}<p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- / Description -->

                    <!-- Images -->
                    <div class="tab-pane fade" id="item-images">
                        <div class="card-body p-5">
                            <div class="row">
                                <div class="col-md">
                                    {#{% include 'admin/blogs/partials/__tabs_photos.html.twig' with {blog: blog} %}#}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- / Images -->

                    <!-- Comments -->
                    <div class="tab-pane fade" id="item-comments">
                        <div class="card review-card mb-4">
                            <h5 class="card-header">Liste des commantaires</h5>
                            <div class="card-body">
                                <div class="review-block">
                                    {% for index,comment in blog.commentaire %}
                                        <div class="row pt-0 {% if loop.index == 1 %}pb-2{% endif %}">
                                            <div class="col-sm-auto pb-2">
                                                {% if comment.user.filename %}
                                                    <img class="img-fluid rounded-circle ui-w-50 ml-0" src="{{ vich_uploader_asset(comment.user, 'imageFile') | imagine_filter('avatar') }}" alt="{{ comment.user.username }}">
                                                {% else %}
                                                    <img  class="img-fluid rounded-circle ui-w-50 ml-0" src="{{ asset('admin/img/avatars/1.png') }}" alt="{{ comment.user.username }}">
                                                {% endif %}
                                            </div>
                                            <div class="col">
                                                <h6 class="m-b-15">
                                                    {{ comment.user.prenoms }} {{ comment.user.nom }}
                                                    <span class="float-right text-muted"> {{ comment.createdAt|ago }}</span>
                                                </h6>
                                                <a href="javascript:"><i class="fas fa-star text-primary"></i></a>
                                                <a href="javascript:"><i class="fas fa-star text-primary"></i></a>
                                                <a href="javascript:"><i class="fas fa-star text-primary"></i></a>
                                                <a href="javascript:"><i class="fas fa-star text-muted"></i></a>
                                                <a href="javascript:"><i class="fas fa-star text-muted"></i></a>
                                                <p class="mt-2 m-b-15 text-muted">{{ comment.message|raw }}</p>
                                                <a href="javascript:" class="mr-4"><i class="fa fa-thumbs-up mr-3 text-primary"></i>Repondre?</a>
                                                <a href="javascript:"><i class="fa fa-heart text-danger mr-3"></i></a>
                                                <a href="javascript:"><i class="fas fa-pencil-alt mr-3 text-primary"></i>Modifier?</a>
                                            </div>
                                        </div>
                                    {% else %}
                                        <div class="card-body hd-detail hdd-user border-bottom bg-light-alt">
                                            <div class="row">
                                                <div class="col">
                                                    <div class="comment-content">
                                                        <p><i class="fa fa-info"></i> <small>Aucun commentaire pour {{ blog.name }} pour le moment</small></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- / Comments -->
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            {% if blog.videourl %}
                <div class="card hdd-right-inner">
                    <div class="card-header">
                        <h5>Aperçu de la vidéo</h5>
                    </div>
                    <div class="card-body">
                        <iframe width="100%" height="300" src="{{ blog.url }}{{ blog.videourl }}" title="{{ blog.name }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                </div>
            {% endif %}
            <div class="card hdd-right-inner">
                <div class="card-header">
                    <h5>Ajouter des images</h5>
                </div>
                <div class="card-body">
                    {{ medias_form_blogs(blog.id) }}
                    <hr>
                    {% include 'admin/blogs/partials/__tabs_photos.html.twig' with {blog: blog} %}
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <div class="media align-items-center">
                            <label class="mb-0 wid-100">Auteur</label>
                            <div class="media-body">
                                <p class="mb-0">
                                    <img  class="wid-20 rounded mr-1 img-fluid" src="{{ asset('admin/img/avatars/1.png') }}" alt="{{ blog.name }}">
                                    <a href="{{ path('admin.users.show', {'id': blog.id}) }}">{{ blog.name }}</a>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="media align-items-center">
                            <label class="mb-0 wid-100">Ajouté le</label>
                            <div class="media-body">
                                <p class="mb-0"><i class="feather icon-calendar mr-1"></i><label class="mb-0">{{ blog.createdAt|date('d/m/Y à H:i:s') }}</label></p>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="media align-items-center">
                            <label class="mb-0 wid-100">Modifié le</label>
                            <div class="media-body">
                                <p class="mb-0"><i class="feather icon-calendar mr-1"></i><label class="mb-0">{{ blog.updatedAt|date('d/m/Y à H:i:s') }}</label></p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script src="{{ asset('admin/js/jquery-3.2.1.min.js') }}"></script>
    <script src="{{ asset('admin/libs/blueimp-gallery/gallery.js') }}"></script>
    <script src="{{ asset('admin/libs/blueimp-gallery/gallery-fullscreen.js') }}"></script>
    <script src="{{ asset('admin/libs/blueimp-gallery/gallery-indicator.js') }}"></script>
    <script src="{{ asset('admin/libs/masonry/masonry.js') }}"></script>
    <script src="{{ asset('admin/js/pages/pages_gallery.js') }}"></script>
{% endblock %}