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

{% block title %}Fellowship | ArchDune{% endblock %}
{% block og_image %}{% static 'images/fellowshipapp_images/01.png' %}{% endblock %}
{% block twitter_image %}{% static 'images/fellowshipapp_images/01.png' %}{% 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/fellowship/style.css' %}" />
<link rel="stylesheet" href="{% static 'css/alert/style.css' %}" />
<link rel="stylesheet" href="{% static 'css/fellowship/social_media.css' %}" />
{% endblock css %} 

{% block content %}

        <section class="campus">
            <div class="compusWraper">
                <!-- Compus Left start -->
                <div class="compusLeft">
                    <div class="compusLeftImage">
                        {% if program.banner_image %}
                        <img src="{{ program.banner_image.url }}" alt="Fellowship Image" loading="lazy" />
                        {% else %}
                        <img src="{% static 'images/fellowshipapp_images/01.png' %}" alt="Fellowship Image" loading="lazy" />
                        {% endif %}
                    </div>
                    <div class="compusLeftApply">
                        <div class="compusLeftApplyWrapper">
                            <a href="#appilcation">
                                <p class="apply">Apply Now</p>
                            </a>
                            <p class="desc">Connect with creativity</p>
                        </div>
                    </div>
                </div>
                <!-- Compus Left end -->

                <!-- Compus Right start -->
                <div class="compusRight">
                    <div class="compusRightWrapper">
                        <p>{{program.title|title}}</p>
                        <h5>{{program.session}}</h5>
                        <h4>{{program.role_title|title}}</h4>
                        <p>{{program.tagline|capfirst}}</p>
                    </div>
                </div>
                <!-- Compus Right end -->
            </div>
        </section>

        <!-- fellowship Studendt section start -->
        <section class="fllowStudent">
            <div class="wro">
                <div class="fllowAllStudent">
                    {% for fellow in fellows %}
                    <div class="fllowSingalStudent">
                        <div class="fellowStudentImage">
                            <img src="{{ fellow.photo.url }}" alt="Fellowship Image" loading="lazy" />
                        </div>
                        <div class="fellowStudentInfo">
                            <h4>{{ fellow.name }}</h4>
                            <p>{{ fellow.department }}</p>
                            <p>{{ fellow.university }}</p>
                            <p>{{ fellow.location }}</p>
                            <p>{{ fellow.email }}</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </section>
        <!-- fellowship Studendt section end -->

        <!-- Past Fellows section start -->
        <section class="pastFellows">
            <div class="wro">
                <div class="fellowWrapper">
                    <div class="fellowTitle BS3K">
                        <h3>Past <span>Fellows</span></h3>
                    </div>
                    <div class="fllowAllStudent">
                        {% for fellow in past_fellows %}
                        <div class="fllowSingalStudent">
                            <div class="fellowStudentImage">
                                <img src="{{ fellow.photo.url }}" alt="Fellowship Image" loading="lazy" />
                            </div>
                            <div class="fellowStudentInfo">
                                <h4>{{ fellow.name }}</h4>
                                <p>{{ fellow.department }}</p>
                                <p>{{ fellow.university }}</p>
                                <p>{{ fellow.location }}</p>
                                <p>{{ fellow.email }}</p>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </section>
        <!-- Past Fellows section end -->

        <!-- fellowship Enrollment Process section start -->
        <section class="enrollment">
            <div class="wro">
                <div class="fellowWrapper">
                    <div class="fellowTitle BS3K">
                        <h3>Enrollment <span>Process</span></h3>
                    </div>
                    <div class="enrollmentAllCard">
                        <div class="enrollmentSingalCard g20application">
                            <img src="{% static 'images/fellowshipapp_images/application.png' %}" alt="Fellowship Image"
                                loading="lazy" />
                            <h4>Application</h4>
                            <p>
                                Fill out the online application form, providing your personal
                                information, educational background, and a brief statement
                                explaining your interest in
                            </p>
                        </div>

                        <div class="enrollmentSingalCard">
                            <img src="{% static 'images/fellowshipapp_images/interview.png' %}" alt="Fellowship Image"
                                loading="lazy" />
                            <h4>Interview</h4>
                            <p>
                                Selected candidates will be invited for an online interview. This is
                                an opportunity for us to get to know you better and assess your
                                suitability for the program.
                            </p>
                        </div>

                        <div class="enrollmentSingalCard">
                            <img src="{% static 'images/fellowshipapp_images/acceptance.png' %}" alt="Fellowship Image"
                                loading="lazy" />
                            <h4>Acceptance</h4>
                            <p>
                                Acceptance If selected, you will receive an acceptance letter via
                                email, confirming your enrollment in the program and detail about
                                the orientation.
                            </p>
                        </div>

                        <div class="enrollmentSingalCard">
                            <img src="{% static 'images/fellowshipapp_images/orientation.png' %}" alt="Fellowship Image"
                                loading="lazy" />
                            <h4>Orientation</h4>
                            <p>
                                Attend the program orientation session, where you will receive
                                detailed information about the program structure, expectations, and
                                upcoming activities.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- fellowship Enrollment Process section end -->

        <!-- fellowship Eligibility section start -->
        <section class="eligibility">
            <div class="wro">
                <div class="eligibilityWrapper">
                    <div class="fellowTitle b4eligibility">
                        <h3>Eligibility</h3>
                    </div>
                    <div class="eligibilityLeftAndRight">
                        <div class="eligibilityLeft">
                            <img src="{% static 'images/fellowshipapp_images/eligibility.png' %}" alt="Fellowship Image"
                                loading="lazy" />
                        </div>
                        <div class="eligibilityRight">
                            <div class="eligibilityRightAlltext">
                                <p>
                                    <span class="eligibilityRightAlltextBold">01.</span> Must be an
                                    enrolled student in your institution.
                                </p>
                                <p>
                                    <span class="eligibilityRightAlltextBold">02.</span> Must have
                                    leadership quality.
                                </p>
                                <p>
                                    <span class="eligibilityRightAlltextBold">03.</span>
                                    Confident, responsible and visionary.
                                </p>
                                <p>
                                    <span class="eligibilityRightAlltextBold">04.</span> You must be
                                    polite, honest, well communicative and excellent team worker.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- fellowship Eligibility section end -->

        <!-- fellowship Benefits section start -->
        <section class="benefits">
            <div class="wro">
                <div class="benefitsWrapper">
                    <div class="fellowTitle BS3K">
                        <h3>Benefits as a Campus Ambassador</h3>
                        <p class="benefitsDesc">
                            We will provide the following benefits for our campus ambassadors.
                        </p>
                    </div>
                    <div class="benefitsLeftAndRight">
                        <div class="benefitsLeft">
                            <div class="benefitsLeftSingalItem">
                                <h4>01. Learn Outside the Box</h4>
                                <p>
                                    Get a competitive edge over your peers by exploring topics outside
                                    your conventional curriculum.
                                </p>
                            </div>

                            <div class="benefitsLeftSingalItem">
                                <h4>02. Gain Practical Insights</h4>
                                <p>
                                    Learn from experienced architects on how to build your own
                                    professional career in architecture..
                                </p>
                            </div>

                            <div class="benefitsLeftSingalItem">
                                <h4>03. Get Expert Reviews</h4>
                                <p>
                                    Get your design projects reviewed by practicing architects and
                                    enhance the quality of your work.
                                </p>
                            </div>

                            <div class="benefitsLeftSingalItem">
                                <h4>04. Free Registration</h4>
                                <p>
                                    When a minimum of 10 participants register under "Campus
                                    Registration" that you lead, your registration is free. Applies
                                    for competitions, courses and events. Participants also get
                                    special discounted price for "Campus registration”.
                                </p>
                            </div>

                            <div class="benefitsLeftSingalItem">
                                <h4>05. Acknowledgments</h4>
                                <p>
                                    Certificates and letter of appreciation will be provided after
                                    successful completion of your tenure. Your name will remain on our
                                    website forever as a past fellow.
                                </p>
                            </div>
                        </div>
                        <div class="benefitsRight">
                            <img src="{% static 'images/fellowshipapp_images/benefits.png' %}" alt="Fellowship Image"
                                loading="lazy" />
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- fellowship Benefits section start -->

        <!-- fellowship Responsibilities section start -->
        <section class="enrollment">
            <div class="wro">
                <div class="fellowWrapper">
                    <div class="fellowTitle BS3K">
                        <h3>Responsibilities as a Campus Ambassador</h3>
                    </div>
                    <div class="enrollmentAllCard">
                        <div class="enrollmentSingalCard responsibilities">
                            <img src="{% static 'images/fellowshipapp_images/publicity_campaign.png' %}" alt="Fellowship Image"
                                loading="lazy" />
                            <div class="responsibilitiesSingalCardInfo">
                                <h4>Publicity Campaign</h4>
                                <p>
                                    Promote current and future courses, competitions and events to
                                    institutional Facebook groups, LinkedIn and your social media
                                    profiles.
                                </p>
                            </div>
                        </div>

                        <div class="enrollmentSingalCard responsibilities">
                            <img src="{% static 'images/fellowshipapp_images/leading_role.png' %}" alt="Fellowship Image"
                                loading="lazy" />
                            <div class="responsibilitiesSingalCardInfo">
                                <h4 class="V4responsibilitiesTitle">Leading Role</h4>
                                <p>
                                    Play leading roles in on campus activities, exhibition, annual
                                    meets and events. Active participation in the strategic planning
                                    for future.
                                </p>
                            </div>
                        </div>

                        <div class="enrollmentSingalCard responsibilities">
                            <img src="{% static 'images/fellowshipapp_images/on_campus_collaboration.png' %}"
                                alt="Fellowship Image" loading="lazy" />
                            <div class="responsibilitiesSingalCardInfo">
                                <h4>On-Campus Collaboration</h4>
                                <p>
                                    Assist your campus students with registration and other processes
                                    for courses, competitions and events as needed. Be the primary
                                    point of contact between ArchDune and the student community.
                                </p>
                            </div>
                        </div>

                        <div class="enrollmentSingalCard responsibilities">
                            <img src="{% static 'images/fellowshipapp_images/volunteer.png' %}" alt="Fellowship Image"
                                loading="lazy" />
                            <div class="responsibilitiesSingalCardInfo">
                                <h4 class="V4responsibilitiesTitle">Volunteer</h4>
                                <p>
                                    Be the leader and organizer of campus registration for discounted
                                    registration fees in courses competitions and events. Also collect
                                    feedback from students and other focus groups to improve future
                                    strategies.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- fellowship Responsibilities section end -->

        <!-- fellowship form section start -->
        <section>
            <div class="wro">
                <div class="fellowTitle BS3K" id="appilcation">
                    <h3>Application Form</h3>
                </div>
                <div class="lead">
                    <div class="legal-stuff">
                        <img src="{% static 'images/fellowshipapp_images/curriculum.png' %}" alt="Fellowship Image" loading="lazy" />
                    </div>
                    <div class="submission">
                        {% if messages %}
                        <div class="messages">
                            {% for message in messages %}
                            <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">
                                {{ message }}
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}
                        <div class="submit-contanner">
                            <form method="POST" enctype="multipart/form-data"
                                action="{% url 'fellowshipapp:fellowship_apply' %}">
                                {% csrf_token %}
                                <fieldset>
                                    <ul>
                                        <li>
                                            <label for="id_name">Your Name <span class="input-requart-star">*</span></label>
                                            <input type="text" name="name" id="id_name" class="s25110"
                                                value="{{ form.name.value|default:'' }}" required />
                                            {% if form.name.errors %}
                                            <div class="error-message">{{ form.name.errors.0 }}</div>
                                            {% endif %}
                                        </li>
                                        <li>
                                            <label for="id_email">Email <span class="input-requart-star">*</span></label>
                                            <input type="email" name="email" id="id_email" class="s25110"
                                                value="{{ form.email.value|default:'' }}" required />
                                            {% if form.email.errors %}
                                            <div class="error-message">{{ form.email.errors.0 }}</div>
                                            {% endif %}
                                        </li>
                                        <li>
                                            <label for="id_phone">Phone <span class="input-requart-star">*</span></label>
                                            <input type="text" name="phone" id="id_phone" class="s25110"
                                                value="{{ form.phone.value|default:'' }}" required />
                                            {% if form.phone.errors %}
                                            <div class="error-message">{{ form.phone.errors.0 }}</div>
                                            {% endif %}
                                        </li>
                                        <li>
                                            <label for="id_country">Country <span class="input-requart-star">*</span></label>
                                            <input type="text" name="country" id="id_country" class="s25110"
                                                value="{{ form.country.value|default:'' }}" required />
                                            {% if form.country.errors %}
                                            <div class="error-message">{{ form.country.errors.0 }}</div>
                                            {% endif %}
                                        </li>
                                        <li>
                                            <label for="id_institution">Name of your Current Institution
                                                <span class="input-requart-star">*</span></label>
                                            <input type="text" name="institution" id="id_institution" class="s25110"
                                                value="{{ form.institution.value|default:'' }}" required />
                                            {% if form.institution.errors %}
                                            <div class="error-message">
                                                {{ form.institution.errors.0 }}
                                            </div>
                                            {% endif %}
                                        </li>
                                        <li>
                                            <label for="id_field_of_study">Field of Study (Department)</label>
                                            <input type="text" name="field_of_study" id="id_field_of_study" class="s25110"
                                                value="{{ form.field_of_study.value|default:'' }}" />
                                            {% if form.field_of_study.errors %}
                                            <div class="error-message">
                                                {{ form.field_of_study.errors.0 }}
                                            </div>
                                            {% endif %}
                                        </li>
                                        <li>
                                            <label for="id_current_level">Current Level of Study (Level, Term, Semester,
                                                etc.)</label>
                                            <input type="text" name="current_level" id="id_current_level" class="s25110"
                                                value="{{ form.current_level.value|default:'' }}" />
                                            {% if form.current_level.errors %}
                                            <div class="error-message">
                                                {{ form.current_level.errors.0 }}
                                            </div>
                                            {% endif %}
                                        </li>
                                        <li>
                                            <label for="id_facebook_url">Facebook URL / Website</label>
                                            <input type="url" name="facebook_url" id="id_facebook_url" class="s25110"
                                                value="{{ form.facebook_url.value|default:'' }}" />
                                            {% if form.facebook_url.errors %}
                                            <div class="error-message">
                                                {{ form.facebook_url.errors.0 }}
                                            </div>
                                            {% endif %}
                                        </li>
                                        <li>
                                            <label for="id_linkedin_url">LinkedIn URL</label>
                                            <input type="url" name="linkedin_url" id="id_linkedin_url" class="s25110"
                                                value="{{ form.linkedin_url.value|default:'' }}" />
                                            {% if form.linkedin_url.errors %}
                                            <div class="error-message">
                                                {{ form.linkedin_url.errors.0 }}
                                            </div>
                                            {% endif %}
                                        </li>
                                        <li>
                                            <label for="id_photo">Upload Your Photo
                                                <span class="input-requart-star">*</span></label>
                                            <span class="instructions-dec">File size: Maximum 512 Kilobytes <br />
                                                Preferrred: 560px by 500px, Your face clearly visible.
                                            </span>
                                            <input type="file" name="photo" id="id_photo" class="s25110" required />
                                            {% if form.photo.errors %}
                                            <div class="error-message">{{ form.photo.errors.0 }}</div>
                                            {% endif %}
                                        </li>
                                        <li>
                                            <label for="id_about">Write about yourself (Max 250 words)</label>
                                            <textarea name="about" id="id_about" rows="8" class="s25110">{{ form.about.value|default:'' }}</textarea>
                                            {% if form.about.errors %}
                                            <div class="error-message">{{ form.about.errors.0 }}</div>
                                            {% endif %}
                                        </li>
                                        <li>
                                            <input type="checkbox" name="agreed_to_terms" id="id_agreed_to_terms" checked
                                                required />
                                            <label for="id_agreed_to_terms" class="checkbox2931">
                                                I agree to the
                                                <a href="/terms/">Terms of Use</a> and
                                                <a href="/privacy/">Privacy Policy</a>
                                            </label>
                                            {% if form.agreed_to_terms.errors %}
                                            <div class="error-message">
                                                {{ form.agreed_to_terms.errors.0 }}
                                            </div>
                                            {% endif %}
                                        </li>
                                    </ul>

                                    <button type="submit" class="submit_user_requirement">
                                        Apply
                                    </button>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- fellowship form section end -->

        <!-- fellowship social media info section starts -->
        <section>
            <div class="fellowship-social-media-div">
                <div class="title">Stay in Touch</div>
                <div class="fellowship-social-media-div-2">
                    {% for social_media in social_media %}
                    {% if social_media.platform == "facebook" %}
                    <a href="{{ social_media.url }}" class="facebook facebook-button-in-fellowship" target="_blank">
                        <div><i class="fa-brands fa-facebook-f icon"></i></div>
                        <div class="followers">{{social_media.followers|upper}}</div>
                        <div class="fans">FOLLOWERS</div>
                    </a>
                    {% endif %}

                    {% if social_media.platform == "linkedin" %}
                    <a href="{{ social_media.url }}" class="linkedin linkedin-button-in-fellowship" target="_blank">
                        <div><i class="fa-brands fa-linkedin icon"></i></div>
                        <div class="followers">{{social_media.followers|upper}}</div>
                        <div class="fans">FANS</div>
                    </a>
                    {% endif %}

                    {% if social_media.platform == "youtube" %}
                    <a href="{{ social_media.url }}" class="youtube youtube-button-in-fellowship" target="_blank">
                        <div><i class="fa-brands fa-youtube icon"></i></div>
                        <div class="followers">{{social_media.followers|upper}}</div>
                        <div class="fans">SUBSCRIBERS</div>
                    </a>
                    {% endif %}

                    {% if social_media.platform == "pinterest" %}
                    <a href="{{ social_media.url }}" class="pinterest pinterest-button-in-fellowship" target="_blank">
                        <div><i class="fa-brands fa-pinterest icon"></i></div>
                        <div class="followers">{{social_media.followers|upper}}</div>
                        <div class="fans">FOLLOWERS</div>
                    </a>
                    {% endif %}

                    {% endfor %}

                </div>
            </div>
        </section>
        <!-- fellowship social media info section Ends -->

{% endblock %} 

{% 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>

{% endblock %}