{% extends 'programmer/base.html' %}
{% load django_bootstrap5 %}
{% load static %}
{% load seo_tags %}
{% load programmer_tags %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'programmer/css/recall.css' %}">
{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Отзывы клиентов</h1>
    <p class="page-subtitle">Реальные отзывы о работе программиста 1С</p>
</div>

<div class="recall-grid">
    {% for p in posts %}
    <div class="modern-card fade-in">

         <!-- Добавляем микроразметку для отзыва -->
        <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "Review",
          "itemReviewed": {
            "@type": "Service",
            "name": "Услуги программиста 1С"
          },
          "author": {
            "@type": "Organization",
            "name": "{{ p.title }}"
          },
          "reviewRating": {
            "@type": "Rating",
            "ratingValue": "5",
            "bestRating": "5"
          },
          "datePublished": "{{ p.time_create|date:'Y-m-d' }}",
          "description": "{{ p.content|striptags|truncatewords:50 }}"
        }
        </script>

        <div class="recall-item">
            <div class="recall-header">
                <div class="recall-info">
                    <h2 class="recall-title">{{ p.title }}</h2>
                    {% if p.time_create %}
<!--                    <div class="recall-meta">-->
<!--                        <span class="recall-date">{{ p.time_create|date:"d.m.Y" }}</span>-->
<!--                    </div>-->
                    {% endif %}
                </div>
            </div>

            <div class="recall-content">
                {% if p.scan %}
                <div class="recall-scan-wrapper">
                    <div class="recall-scan-container">
                        <img src="{{ p.scan.url }}"
                             alt="Отзыв от {{ p.title }}"
                             class="recall-scan"
                             onclick="ImageModal.open('{{ p.scan.url }}', '{{ p.title }}')">
                        <div class="scan-hint">
                            <span class="scan-zoom-icon">🔍</span>
                            <span class="scan-text">Нажмите для увеличения</span>
                        </div>
                    </div>
                </div>
                {% endif %}

                <div class="recall-text">
                    {{ p.content|linebreaks }}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

{% if not posts %}
<div class="modern-card text-center fade-in">
    <h3>💬 Отзывы клиентов</h3>
    <p class="card-subtitle">Здесь будут отображаться отзывы от довольных клиентов</p>
    <div class="card-actions justify-center">
        <a href="{% url 'solution' %}" class="btn btn-primary">Посмотреть проекты</a>
        <a href="{% url 'about' %}" class="btn btn-secondary">Связаться со мной</a>
    </div>
</div>
{% endif %}

<!-- Модальное окно для увеличения изображений -->
<div id="imageModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalTitle">Просмотр изображения</h3>
            <button class="modal-close" onclick="ImageModal.close()">&times;</button>
        </div>
        <div class="modal-body">
            <img class="modal-image" id="modalImage" alt="">
        </div>
    </div>
</div>

<script src="{% static 'programmer/js/floating-button.js' %}"></script>
<script src="{% static 'programmer/js/recall.js' %}"></script>

{% block extra_js %}

{% endblock %}


{% endblock %}