{% extends "base.html" %}
{% load static %}
{% block title %}{{ object.title }} | ArchDune{% endblock %}

{% block meta_description %}{{ object.description|truncatechars:160 }}{% endblock %}
{% block meta_keywords %}{{ object.keywords }}{% endblock %}

{% block og_type %}article{% endblock %}
{% block og_title %}{{ object.title }} | ArchDune{% endblock %}
{% block og_description %}{{ object.description|truncatechars:200 }}{% endblock %}
{% block og_url %}{{ request.build_absolute_uri }}{% endblock %}
{% block og_image %}{{ object.get_cover_image.image.url }}{% endblock %}

{% block twitter_title %}{{ object.title }} | ArchDune{% endblock %}
{% block twitter_description %}{{ object.description|truncatechars:200 }}{% endblock %}
{% block twitter_image %}{{ object.get_cover_image.image.url }}{% endblock %}


{% block css %}

<link rel="stylesheet" id="astra-google-fonts-css"
  href="https://fonts.googleapis.com/css?family=Poppins%3A400%2C&#038;display=fallback&#038;ver=4.0.2" media="all" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<link rel="stylesheet" id="google-fonts-1-css"
  href="https://fonts.googleapis.com/css?family=Roboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto+Slab%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CPoppins%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&#038;display=auto&#038;ver=6.2"
  media="all" />
<link rel="stylesheet" href="{% static 'css/my-css/main/my-css-main.css' %}" />
<link rel="stylesheet" href="{% static 'css/projectDetails/projectDetails.css' %}" />
<link rel="stylesheet" href="{% static 'css/projectDetails/lightbox.css' %}" />
<link rel="stylesheet" href="{% static 'css/utils/utils.css' %}" />
{% endblock css %}

{% block content %}
<section>
  <div class="wro">
    <div class="allProjectsection">
      <div class="left-project-link">
        <h4><a href="{% url 'projectapp:all_projects' %}">PROJECT</a></h4>
        {% if project.project_type == "student" %}
        <ul>
          {% for institute in institutes %}
          <li><a href="{% url 'projectapp:institute_project_list' institute.slug %}">{{ institute.slug|upper }}</a></li>
          {% endfor %}

          {% for type in academic_types %}
          <li><a href="{% url 'projectapp:academic_project_list' type.slug %}">{{ type.name }}</a></li>
          {% endfor %}
        </ul>
        {% else %}

        <ul>
          <ul id="hilite-prihect-mano">
            <li>
              <a href="{% url 'projectapp:professional_projects' %}">Professional Works</a>
            </li>
            <li>
              <a href="{% url 'projectapp:student_projects' %}">Student works</a>
            </li>
            <li><a href="#">Illustration</a></li>
            <li><a href="{% url 'photographyapp:photography_page' %}">Photography</a></li>
            <li><a href="/">Graffiti</a></li>
          </ul>

          {% for tag in tags.all %}
          <li><a href="{% url 'projectapp:tag_project_list' tag.slug %}">{{ tag.name|capfirst }}</a></li>
          {% endfor %}
        </ul>
        {% endif %}
      </div>

      <div class="center-all-projects">
        <div class="c-singal-project">
          <h4 class="c-sin-pro-title-shear">
            <a class="paramount-title" href="{% url 'projectapp:project_detail' slug=project.slug %}">{{project.title}}
            </a>
            <div class="shear">
              <div class="socil-shear-icon">
                <a href="#" target="_blank" class="facebook-btn"><i class="fa-brands fa-facebook"></i></a>
                <a href="#" target="_blank" class="twitter-btn"><i class="fa-brands fa-square-twitter"></i></a>
                <a href="#" target="_blank" class="pinterest-btn"><i class="fa-brands fa-pinterest"></i></a>
                <a href="#" target="_blank" class="linkedin-btn"><i class="fa-brands fa-linkedin"></i></a>
              </div>
              <button class="c-sin-pro-title-shear2400">
                <i class="fa-solid fa-share-nodes"></i>
              </button>
            </div>
          </h4>
          <div class="c-l-p-podt-meta">
            <div class="post-meta-link">

              {% for tag in project.tags.all %}
              <a href="{% url 'projectapp:tag_project_list' tag.slug %}">{{ tag|capfirst }}</a> |
              {% endfor %}

            </div>
            <div class="post-meta-time">
              <small> | {{ project.created_at|date:"d M, Y" }} | </small>
              <small> | Total Views: {{ project.views }} | </small>
            </div>
          </div>
          <div class="c-s-p-i-p-text">
            <div class="podt-meta-images-section">
              <div class="c-s-p-i-image-gallery">
                <div class="s-i-gallery">
                  {% if project.get_cover_image %}
                  <a href="{{ project.get_cover_image.image.url }}" data-lightbox="models"
                    data-title="{{project.get_cover_image.caption}}">
                    <img src="{{ project.get_cover_image.image.url }}" alt="{{project.student_name|title}}" />
                  </a>
                  {% else %}
                  <a href="{% static 'images/no-image.jpg' %}" data-lightbox="models" data-title="{{project.caption}}">
                    <img src="{% static 'images/no-image.jpg' %}" alt="{{project.student_name|title}}" />
                  </a>
                  {% endif %}
                  <div class="s-i-g-b-text">
                    <p>{{project.get_cover_image.credit}}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="podt-meta-dec-text">
              <table>
                <tbody>
                  {% if project.project_type == 'student' %}
                  <tr>
                    <td class="p-m-d-t-frist-text" style="width: 13%">
                      Student Name:
                    </td>
                    <td class="p-m-d-t-seccend-text">
                      <b> {{project.student_name|title}} </b>
                    </td>
                  </tr>
                  <tr>
                    <td class="p-m-d-t-frist-text">Year:</td>
                    <td class="p-m-d-t-seccend-text"><b> {{project.year}} </b></td>
                  </tr>
                  <tr>
                    <td class="p-m-d-t-frist-text">Studio:</td>
                    <td class="p-m-d-t-seccend-text">
                      <b>{{project.studio}}</b>
                    </td>
                  </tr>
                  <tr>
                    <td class="p-m-d-t-frist-text">Institute:</td>
                    <td class="p-m-d-t-seccend-text">
                      <b>{{project.institute|capfirst}}</b>
                    </td>
                  </tr>
                  <tr>
                    <td class="p-m-d-t-frist-text">Studio Teachers:</td>
                    <td class="p-m-d-t-seccend-text">
                      <b>{{project.studio_teachers|title}}</b>
                    </td>
                  </tr>
                  {% else %}
                  {% if project.project_name %}
                  <tr>
                    <td class="p-m-d-t-frist-text"> Project Name:</td>
                    <td class="p-m-d-t-seccend-text">
                      <b>{{project.project_name|capfirst}}</b>
                    </td>
                  </tr>
                  {% endif %}
                  {% if project.design_team %}
                  <tr>
                    <td class="p-m-d-t-frist-text"> Design Team:</td>
                    <td class="p-m-d-t-seccend-text">
                      <b>{{project.design_team|capfirst}}</b>
                    </td>
                  </tr>
                  {% endif %}
                  {% if project.design_team_leader %}
                  <tr>
                    <td class="p-m-d-t-frist-text"> Design Team Leader:</td>
                    <td class="p-m-d-t-seccend-text">
                      <b>{{ project.design_team_leader|title }}</b>
                    </td>
                  </tr>
                  {% endif %}
                  {% if project.design_associates %}
                  <tr>
                    <td class="p-m-d-t-frist-text"> Design Associate:</td>
                    <td class="p-m-d-t-seccend-text">
                      <b>{{ project.design_associates }}</b>
                    </td>
                  </tr>
                  {% endif %}
                  {% if project.photographs %}
                  <tr>
                    <td class="p-m-d-t-frist-text"> Photographs:</td>
                    <td class="p-m-d-t-seccend-text">
                      <b>{{ project.photographs }}</b>
                    </td>
                  </tr>
                  {% endif %}
                  <tr>
                    <td class="p-m-d-t-frist-text"> Year:</td>
                    <td class="p-m-d-t-seccend-text">
                      <b>{{project.year}}</b>
                    </td>
                  </tr>
                  <tr>
                    <td class="p-m-d-t-frist-text"> Client:</td>
                    <td class="p-m-d-t-seccend-text">
                      <b>{{project.client}}</b>
                    </td>
                  </tr>
                  <tr>
                    <td class="p-m-d-t-frist-text">Status:</td>
                    <td class="p-m-d-t-seccend-text">
                      <b>{{project.status|title}}</b>
                    </td>
                  </tr>

                  {% endif %}

                  <!-- MORE INFORMATION -->
                  <tr class="mor-info">
                    <td class="p-m-d-t-frist-text">Typology:</td>
                    <td class="p-m-d-t-seccend-text">
                      <b> {{project.typology}}</b>
                    </td>
                  </tr>
                  {% if project.height %}
                  <tr class="mor-info">
                    <td class="p-m-d-t-frist-text">Height:</td>
                    <td class="p-m-d-t-seccend-text">
                      <b> {{project.height}} </b>
                    </td>
                  </tr>
                  {% endif %}
                  {% if project.land_area %}
                  <tr class="mor-info">
                    <td class="p-m-d-t-frist-text">Land Area:</td>
                    <td class="p-m-d-t-seccend-text">
                      <b> {{project.land_area }} </b>
                    </td>
                  </tr>
                  {% endif %}
                  <tr class="mor-info">
                    <td class="p-m-d-t-frist-text">Build Area:</td>
                    <td class="p-m-d-t-seccend-text">
                      <b> {{project.built_area}} </b>
                    </td>
                  </tr>
                  {% if project.basement %}
                  <tr class="mor-info">
                    <td class="p-m-d-t-frist-text">Basement:</td>
                    <td class="p-m-d-t-seccend-text">
                      <b> {{project.basement}}</b>
                    </td>
                  </tr>
                  {% endif %}
                  {% if project.location %}
                  <tr class="mor-info">
                    <td class="p-m-d-t-frist-text">Location:</td>
                    <td class="p-m-d-t-seccend-text">
                      <b>{{ project.location }}</b>
                    </td>
                  </tr>
                  {% endif %}
                  {% if project.software %}
                  <tr class="mor-info">
                    <td class="p-m-d-t-frist-text">Software:</td>
                    <td class="p-m-d-t-seccend-text">
                      <b>{{ project.software }}</b>
                    </td>
                  </tr>
                  {% endif %}


                </tbody>
              </table>
              <button class="raad_mor_option">Read More</button>
              <p>
                {{ project.description|linebreaks }}
              </p>
            </div>

            {% for image_text in image_text_sections %}

            <div class="c-s-p-i-image-gallery">
              <div class="s-i-gallery">

                <p>
                  {{image_text.text_content|safe}}
                </p>

                {% if image_text.image %}
                <a href="{{image_text.image.url}}" loading="lazy" data-lightbox="models"
                  data-title="{{image_text.caption}}">
                  <img src="{{image_text.image.url}}" loading="lazy" alt />
                </a>
                {% else %}
                <a href="{% static 'images/no-image.jpg' %}" loading="lazy" data-lightbox="models"
                  data-title="{{image_text.caption}}">
                  <img src="{% static 'images/no-image.jpg' %}" loading="lazy" alt />
                </a>
                {% endif %}
                <div class="s-i-g-b-text">
                  <p>
                    {{image_text.credit}}
                  </p>
                </div>
              </div>
            </div>

            {% endfor %}

            {% for video in project.videos.all %}
            <div class="my-2rem">
              <div class="">
                <iframe class="w-full h-13rem md-h-25rem lg-h-30rem" src="{{ video.get_embed_url }}"
                  title="YouTube video player" frameborder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
                </iframe>
              </div>
            </div>
            {% endfor %}

            <!-- VIDEO DIV ENDS------------------------------------------------------------------------------------------------- -->


            <div class="c-s-p-i-image-gallery">
              <!-- THIS IS THE PREVIOUS AND NEXT PROJECT DIV---------------------------------------------------------------------------------- -->
              <div class="backAndPrebesSection">
                {% if project.get_previous_project %}
                <p>
                  <a href="{% url 'projectapp:project_detail' project.get_previous_project.slug %}">« Previous
                    Project</a>
                </p>
                {% else %}
                <p>
                  <a style="color: black;" href="javascript:void(0)">« Previous Project</a>
                </p>
                {% endif %}

                {% if project.get_next_project %}
                <p>
                  <a href="{% url 'projectapp:project_detail' project.get_next_project.slug %}">Next Project »</a>
                </p>
                {% else %}
                <p>
                  <a style="color: black;" href="javascript:void(0)">Next Project »</a>
                </p>
                {% endif %}
              </div>
            </div>
            <div class="c-s-p-i-image-gallery my-2rem">
              <div class="similear-post">
                <h3>SIMILAR POST</h3>
                <div class="all-s-po-s-project">
                  {% for project in similar_projects %}

                  <div class="s-po-s-roject">
                    <div class="s-po-s-pr-image">
                      {% if project.get_cover_image %}
                      <a href="{% url 'projectapp:project_detail' project.slug %}">
                        <img src="{{project.get_cover_image.image.url}}" loading="lazy" alt />
                        {% else %}
                        <a href="{% url 'projectapp:project_detail' project.slug %}">
                          <img src="{% static 'images/no-image.jpg' %}" loading="lazy" alt />
                          {% endif %}
                    </div>
                    <div class="s-po-s-pr-dec">
                      <a href="{% url 'projectapp:project_detail' project.slug %}">
                        <h5>{{project.title}}</h5>
                      </a>
                      <p>{{project.description|truncatewords:5}}</p>
                    </div>
                  </div>

                  {% endfor %}

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-projects-recent-updates">
        <div class="container-ubdate-projects">
          <div class="singal-recent-updates-container">
            <h4>
              <a href="">RECENT UPDATES</a>
            </h4>
            <div class="updat-all-projects">
              {% for project in recent_projects %}

              <div class="single-project g504">
                <div class="s-p-image">
                  {% if project.get_cover_image %}
                  <a href="{% url 'projectapp:project_detail' project.slug %}">
                    <img src="{{project.get_cover_image.image.url}}" loading="lazy" alt />
                    {% else %}
                    <a href="{% url 'projectapp:project_detail' project.slug %}">
                      <img src="{% static 'images/no-image.jpg' %}" loading="lazy" alt />
                      {% endif %}
                </div>
                <div class="s-p-dec-text">
                  <p>
                    <a href="{% url 'projectapp:project_detail' project.slug %}">{{project.title}}</a>
                  </p>
                  <p>{{ project.created_at|date:"d F, Y" }}</p>
                </div>
              </div>
              {% endfor %}


            </div>
          </div>

          <!-- Advertisement Section -->
          {% if advertisements %}
          <div class="advertisement-container">
            {% for ad in advertisements %}
            <div class="single-advertisement">
              {% if ad.link %}
              <a href="{{ ad.link }}" target="_blank" rel="noopener noreferrer">
                <img src="{{ ad.image.url }}" alt="{{ ad.title }}" loading="lazy" />
              </a>
              {% else %}
              <img src="{{ ad.image.url }}" alt="{{ ad.title }}" loading="lazy" />
              {% endif %}
              {% if ad.description %}
              <p class="ad-description">{{ ad.description }}</p>
              {% endif %}
            </div>
            {% endfor %}
          </div>
          {% endif %}

          <div class="most-visited-updates-container">
            <h4>
              <a href="#">MOST VISITED</a>
            </h4>

            {% for project in most_viewed_projects %}
            <div class="singal-most-visited-updates-iamges">
              <div class="s-m-v-head">
                <div class="L-header-contant">
                  <a href="{% url 'projectapp:project_detail' project.slug %}">
                    <h5>{{ project.title }}</h5>
                  </a>
                  <p>{{ project.created_at|date:"d F, Y" }} || Total views: {{ project.views }}</p>
                </div>
                <!-- <div class="R-header-vious">
                    <p><i class="fa-solid fa-user-tag"></i> 9</p>
                  </div> -->
              </div>
              <div class="s-m-v-images">
                {% if project.get_cover_image %}
                <a href="{% url 'projectapp:project_detail' project.slug %}">
                  <img src="{{ project.get_cover_image.image.url }}" loading="lazy" alt />
                </a>
                {% else %}
                <a href="{% url 'projectapp:project_detail' project.slug %}">
                  <img src="{% static 'images/no-image.jpg' %}" loading="lazy" alt />
                </a>
                {% endif %}
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock content %}


{% block page_js %}

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<!-- Local Scripts -->
<script src="{% static 'js/home/script.js' %}"></script>
<script src="{% static 'script/home/nav.js' %}"></script>
<script src="{% static 'script/projectDetails/lightbox-plus-jquery.js' %}"></script>

{% endblock %}