{% extends "base.html" %}
{% load static %}

{% block title %}Projects | ArchDune{% 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" 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/project/style.css' %}" />

{% endblock css %}

{% block content %}
<section>
    <div class="wro">
        <div class="allProjectsection">
            <div class="left-project-link">
                <!--  Something is wrong with left-project-link class-->
                <h4 class="project-name-title"><a href="{% url 'projectapp:all_projects' %}">PROJECT</a></h4>
                <!-- Highlighted Project Links------------------------------------- -->
                <ul class="project-menu-list-highlighted">
                    <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>

                <div class="project-menu-list-hr">
                    <!-- This div is used as a horizontal Row -->
                </div>

                <!-- Normal Project Links--------------------------------- -->
                <ul class="project-menu-list">
                    {% for tag in tags.all %}
                    <li><a href="{% url 'projectapp:tag_project_list' tag.slug %}">{{ tag.name|capfirst }}</a></li>
                    {% endfor %}
                </ul>
                <div class="project_page_show_more_and_less_button_div">
                    <button class="show_more_button_project_page">Show More</button>
                    <button class="show_less_button_project_page">Show Less</button>
                </div>
            </div>

            <!-- --------------------
            Start all projects 
          --------------------- -->
            <div class="center-all-projects">
                {% for project in projects %}
                <div class="c-singal-project">
                    <h4>
                        <a href="{% url 'projectapp:project_detail' slug=project.slug %}">{{project.title}}</a>
                    </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">
                            {% if project.get_cover_image %}
                            <img src="{{ project.get_cover_image.image.url }}" alt="{{project.title}}" />
                            {% else %}
                            <img src="{% static 'images/no-image.jpg' %}" alt="{{project.title}}" />
                            {% endif %}
                            <!-- </div> -->
                            <div class="podt-meta-short-dec">

                                <p>
                                    <a href="{% url 'projectapp:project_detail' slug=project.slug %}">
                                        {% if project.project_type == 'student' %}
                                        Student Name: {{ project.student_name }}</a><br />
                                    <a href="{% url 'projectapp:project_detail' slug=project.slug %}">Year: {{ project.year }}</a><br />
                                    <a href="{% url 'projectapp:project_detail' slug=project.slug %}">Studio: {{ project.studio }} </a><br />
                                    <a href="{% url 'projectapp:project_detail' slug=project.slug %}">
                                        {{ project.institute.name }}
                                    </a>
                                    {% else %}
                                    Design Team: {{ project.design_team }}</a><br />
                                    <a href="{% url 'projectapp:project_detail' slug=project.slug %}">Year: {{ project.year }}</a><br />
                                    <a href="{% url 'projectapp:project_detail' slug=project.slug %}">Status: {{ project.status }} </a><br />
                                    {% endif %}
                                </p>

                            </div>
                        </div>
                        <div class="podt-meta-dec-text">
                            <p>
                                {{ project.description|truncatewords:50 }}
                            </p>
                        </div>
                        <div class="podt-meta-read-more-section">
                            <a href="{% url 'projectapp:project_detail' slug=project.slug %}">Read More [+]</a>
                        </div>
                    </div>
                </div>
                {% endfor %}
                
                {% include "pagination.html" %}

            </div>
            <!-- --------------------
            end all projects 
          --------------------- -->

            <div class="right-projects-recent-updates">
                <div class="container-ubdate-projects">
                    <div class="singal-recent-updates-container">
                        <h4>
                            <a href="{% url 'projectapp:all_projects' %}">RECENT UPDATES</a>
                        </h4>
                        <div class="updat-all-projects">
                            {% for project in recent_projects %}
                            <div class="single-project g504">
                                <div class="s-p-image">
                                    {% with cover_image=project.get_cover_image %}
                                    {% if cover_image %}
                                    <a href="{% url 'projectapp:project_detail' slug=project.slug %}">
                                        <img src="{{ cover_image.image.url }}" alt="{{ project.title }}" />
                                    </a>
                                    {% endif %}
                                    {% endwith %}
                                </div>
                                <div class="s-p-dec-text">
                                    <p>
                                        <a href="{% url 'projectapp:project_detail' slug=project.slug %}">{{ project.title }}</a>
                                    </p>
                                    <p>{{ project.created_at|date:"d F, Y" }}</p>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="most-visited-updates-container">
                        <h4>
                            <a href="{% url 'projectapp:all_projects' %}">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' slug=project.slug %}">
                                        <h5>{{ project.title }}</h5>
                                    </a>
                                    <p>{{ project.created_at|date:"d F, Y" }} || Total views: {{ project.views }}</p>
                                </div>
                            </div>
                            <div class="s-m-v-images">
                                {% with cover_image=project.get_cover_image %}
                                {% if cover_image %}
                                <a href="{% url 'projectapp:project_detail' slug=project.slug %}">
                                    <img src="{{ cover_image.image.url }}" alt="{{ project.title }}" />
                                </a>
                                {% endif %}
                                {% endwith %}
                            </div>
                        </div>
                        {% endfor %}

                    </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>
            </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 'js/project_page/link_list.js' %}"></script>

{% endblock %}