{% extends 'main/base.html' %}
{% load static %}
{% load i18n %}


{% block title %}{{ clinic_data.name }} {% trans "in" %} {{ clinic_data.country }}{% endblock title %}

{% block description %}
{{ clinic_data.name }} {% trans "in" %} {{ clinic_data.city }}, {{ clinic_data.country }}, {% trans "offers a wide range of medical treatments" %},  
{% for random_treatment in random_treatments %}
{{ random_treatment }}
{% endfor %}
{% endblock description %}

{% block body %}

<section class="top-section clinic-hero-section">
  <div class="clinic-bg"></div>
  <div class="container">
    <div class="row">
      <div class="col-md-6 hero-section-left">
        <h1 class="text-dark">{{clinic_data.name}}</h1>
        <div class="icon-text icon-text-big">
          <img src="{% static 'img/location-icon.png' %}" alt="clinic location">
          <span>{{clinic_data.city}}, {{clinic_data.country}}</span>
        </div>

        <div class="clinic-free-quote-btn">
          <a href="{% url 'clinics:clinics_free_quote' clinic_data.slug %}"
            class="btn btn-outline btn-md">
            {% trans "Get a free quote" %}
          </a>
        </div>

        <div class="row clinic-stats">
          <div class="col-4">
            <div class="clinic-single-stat">
              <img src="{% static 'img/rating-icon.png' %}" alt="clinic location">
              <h4>{{clinic_data.get_avg_rating}}</h4>
              <p class="text-grey">{% trans "Average Rating" %}</p>
            </div>
          </div>
          <div class="col-4">
            <div class="clinic-single-stat">
              <img src="{% static 'img/review-icon.png' %}" alt="clinic location">
              <h4>{{clinic_data.count_reviews}} {% trans "Review(s)" %}</h4>
              <p class="text-grey">{% trans "Given" %}</p>
            </div>
          </div>
          <div class="col-4">
            <div class="clinic-single-stat">
              <img src="{% static 'img/doctor-icon.png' %}" alt="clinic location">
              <h4>{{clinic_data.count_doctors}} {% trans "Doctor(s)" %}</h4>
              <p class="text-grey">{% trans "Available" %}</p>
            </div>
          </div>
        </div>

      </div>
      <div class="col-md-6">
        <img src="{{ cover_image.image.url }}" alt="#" class="clinic-img">
      </div>
    </div>
  </div>
</section>

<div class="clinic-page-container">


  <section class="clinic-about-section">
    <div class="container">
      <h2 class="text-dark heading-border">
        {% trans "About Clinic" %}
      </h2>

      <div class="row">
        <div class="col-lg-8 col-md-10">
          <p>
            {{clinic_data.description}}
          </p>
          <p>
            {{clinic_data.about}}
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="clinic-photos-section">
    <div class="container">
      <h2 class="text-dark heading-border">
        {% trans "Photos" %}
      </h2>

      <div class="row">
        <div class="col-lg-6">
          <div class="photo-container">
            <h5 class="subheading text-grey">
              {% trans "facilities photos" %}
            </h5>

            <div class="gallery-1">
              <div id="inline-gallery-facilities" class="inline-gallery-container"></div>
            </div>
          </div>

        </div>
        {% if clinic_data.allimagesafter.all %}
        <div class="col-lg-6">
          <div class="photo-container">
            <h5 class="subheading text-grey">
              {% trans "before/after photos" %}
            </h5>

            <div class="gallery-2">
              <!-- <div id="inline-gallery-beforeafter" class="inline-gallery-container"></div> -->

              <div class="owl-carousel" id="owl-carousel-image">
                {% for image in clinic_data.allimagesafter.all %}
                <div class="item">
                  <div class="before-after-container">
                    <div class="before-img">
                      <img src="{{ image.beforeImage.url }}" alt="before img">
                    </div>
                    <div class="after-img">
                      <img src="{{ image.afterImage.url }}" alt="after img">
                    </div>
                  </div>
                </div>
                {% endfor %}
              </div>
            </div>


          </div>

        </div>
        {% endif %}

      </div>
    </div>
  </section>

  {% if clinic_data.count_doctors > 0 %}
  <section class="clinic-doctors-section">
    <div class="container">
      <h2 class="text-dark heading-border">
        {{clinic_data.count_doctors}} {% trans "Doctors Available" %}
      </h2>

      <div class="row">
        {% for doctor in clinic_data.get_doctors %}
        <div class="col-xl-4 col-lg-6 col-md-6">
          <div class="doctor-card">
            {% if doctor.image %}
            <img src="{{ doctor.image.url }}" alt="doctor image" class="doctor-card-img">
            {% endif %}

            <div class="doctor-card-content">
              <h5>{{doctor.name}} </h5>

              <p class="text-dark">
                <span class="text-600">
                  {{doctor.description}}
                </span>
              </p>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </section>
  {% endif %}


  {% if clinic_data.allcertificatesforclinic.all %}
  <section class="clinic-certification-section">
    <div class="container">
      <h2 class="text-dark heading-border">
        {% trans "Clinic Certifications" %}
      </h2>

      <div class="row">
        {% for certificate in clinic_data.allcertificatesforclinic.all %}
        <div class="col-sm-6">
          <div class="certificate-box">
            <h6 class="text-dark">
              {{certificate.certificates.name}}
            </h6>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </section>
  {% endif %}


  <section class="clinic-review-section bg-light">
    <div class="container">
      <h2 class="text-dark heading-border">
        {% trans "Clinic Reviews" %}
      </h2>


      <div class="row mt-4">
        <div class="col-md-8">
          {% for review in clinic_data.get_reviews %}
          <div class="review-card">
            <div class="review-card-top">
              <div>
                <h5 class="text-dark mb-2">
                  {{review.name}}
                </h5>
                <p class="p-sm text-grey">
                  {{review.created}}
                </p>
              </div>

              <div class="review-card-top-right">
                <p class="text-purple p-sm text-right">
                  {{review.avg_review_rating}} {% trans "stars" %}
                </p>
                <div class="Stars" style="--rating: {{review.avg_review_rating}};" aria-label="Rating of this product is {{review.avg_review_rating}} out of 5."></div>
              </div>
            </div>
            <div class="review-card-bottom">
              <p>
                {{review.review}}
              </p>
            </div>


          </div>
          {% endfor %}
        </div>
        <div class="col-md-4">
          <div class="card card-sm card-border mt-4">
            <p class="text-grey">
              {% trans "Read real reviews from real patients of" %} {{clinic_data.name}}, {% trans "in" %} {{clinic_data.city}}, {{clinic_data.country.name}}. {{clinic_data.name}}
              {% trans "has achieved a star rating of" %} {{clinic_data.get_avg_rating}} {% trans "based on" %} {{clinic_data.count_reviews}} {% trans "reviews" %}.
            </p>
            <p class="text-grey mt-4">
              {% trans "If you are a past patient of" %} {{clinic_data.name}} {% trans "please click the 'write review' button to provide your review for others to read. Writing a review will only take 2 minutes to complete" %}.

            </p>

            <p class="text-grey mt-4 heading-border">
              {% trans "If you have any other questions, you can" %} <a href="/contact" target="_blank" class="link link-primary">{% trans "contact us" %}</a> 
              {% trans "free of charge" %}
            </p>

            <div class="text-center mt-4">
              {% comment %} <a href="/{{language}}/clinic/{{clinic_data.language.code}}/{{clinic_data.code}}/add-review" class="btn btn-md btn-primary"> {% endcomment %}
              <a href="{% url 'clinics:clinics_reviews' clinic_data.slug %}" class="btn btn-md btn-primary">
                {% trans "Write a Review" %}
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>


{% endblock body %}