<div class="central_container">
    <div class="card">
        <div class="part1">
            <img class="card-image" src="{{ srcImg }}" >
            
            <div class="card-content">
                <h2 class="quote">“{{quoteContent}}”</h2>
            </div>

            <div class="icons">
                {% if fav == false %}
                    <div class="like-icon-none"><a class="likeLien" href="{{racine}}/addFav/{{idQuote}}"><img src="../images/Vector.png" alt="coeur vide"></a></div>
                {% else %}
                    <div class="like-icon"><a class="likeLien" href="{{racine}}/supFav/{{idQuote}}"><img src="../images/VectorCoeur.png" alt="coeur plein"></a></div>
                {% endif %}
                <div class="share-icon" onclick="copyCurrentUrl()">🔗</div>
            </div>
        </div>
        <div class="part2">
            <div class="info">
                <ul class="infoQuote">
                    <li>- {{sourceName}} ({{type}})</li>
                    <li>- {{nameCarac}}</li>
                    <li>- {{dateSortie}}</li>
                </ul>
            </div>
            
            <div class="likes">
                    <p>{{nbLike}} ❤️</p>
            </div>
        </div>
    </div>

    <div class="commentaire">
        <div class="formulaire">
            <form action="{{racine}}/addComment" method="post">
                <input type="text" class="comAdd" id="content" name="content" placeholder="Commentaire..." required>
                <input type="hidden" class="hide" id="idQuote" name="idQuote" value="{{idQuote}}">
                <input type="submit" class="btn" value="" />
            </form>
        </div>
        {% if com|length > 0 %} 
        <div class="comment_section">
            {% for c in com %}
                <div class="com">
                    <div class="infCom">
                        <div class="imgIcones">
                            <img class="avatar" src="{{c.img}}" alt="avatar">
                        <strong class="userName">
                            {{c.user}}
                        </strong>
                        </div>
                        <div class="date">
                            {{ c.date }}
                        </div>
                    </div>
                    <p class="cont">
                        {{c.comment}}
                    </p>
                </div>
            {% endfor %} 
        {% else %}
            <div class="comment_section">
                <p> Soyez le premier à commenter </p>
            </div>
        {% endif %}
    </div>
</div>
</body>
</html>
