{% extends 'base.html.twig' %}
{% block title %}User{% endblock %}
{% block body %}
<h1>Library of {{ user.nom }} based in {{ user.country }}</h1>
<div class="row">
<div class="grid box">
{% for livre in livres %}
<div class="card">
<img alt="" src="/uploads/{{ livre.photo }}" onerror="this.src='/img/book.avif'" class="height-grid-card" style="height:100%;">
<div class="card-body p-2">
<a href="{{ path('app_livre_show', {'id': livre.id}) }}"> <h2 class="primary-color card-title font-weight-bold">{{ livre.titre }}</h2></a>
{# <span class="new-secondary text-secondary small-text">
{{ livre.description|slice(0, 250) }}
{% if livre.description|length > 250 %}
<span id="dots_{{ loop.index }}">...</span>{% endif %}
<span id="more_{{ loop.index }}" style="display: none;">{{ livre.description|slice(250) }}</span>
{% if livre.description|length > 250 %}
<a style="text-decoration: underline; cursor: pointer;color: #320258;" onclick="myFunction('{{ loop.index }}')" id="myBtn_{{ loop.index }}">Lire plus</a>
{% endif %}
</span> #}
<span class="">
auteur : {{ livre.auteur }} <br>
Language : {{livre.language}}<br>
Country : {{livre.user.country}}
</span>
</div>
<div class="body2">
<button type="button" class="btn btn-success">Réserver une séance</button>
</div>
</div>
{% endfor %}
</div></div>
{# <a href="{{ path('app_user_index') }}">la liste des bibliothèque</a>
<a href="{{ path('app_user_edit', {'id': user.id}) }}">edit</a> #}
{# {{ include('user/_delete_form.html.twig') }} #}
<script>
function myFunction(id) {
var dotsElement = document.getElementById('dots_' + id);
var moreTextElement = document.getElementById('more_' + id);
var btnTextElement = document.getElementById('myBtn_' + id);
if (dotsElement.style.display === 'none') {
dotsElement.style.display = 'inline';
btnTextElement.innerHTML = 'Lire plus';
moreTextElement.style.display = 'none';
} else {
dotsElement.style.display = 'none';
btnTextElement.innerHTML = 'Lire moins';
moreTextElement.style.display = 'inline';
}
}
</script>
{% endblock %}