{% extends 'base.html' %}
{% block title %}Search result for {{ query }} | DjangoSMS{% endblock title %}

{% load class_name %}

{% block content %}

<div id="input-nav" class="p-3">
    <p class="text-muted m-0">About {{ count }} results for <b><em class="text-orange"> {{ query }}</em></b></p>
</div>
<br><br>

<style>
    .session-wrapper{position: relative;}
    .session{position: absolute; top: -15px; right: 25px; z-index: 2;}
    .br-orange{border: 1px solid #fd7e14; border-radius: 7px;}
    .class-item {
        display: block;
        border-left: 4px solid #6cbd45; 
        padding: 1rem !important;
        background: #f8f9fa;
        border-radius: 3px;
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
        transition: .5s;
    }
    .class-item p{padding: 2px; margin: 0; color: #b4b4b4; transition: .5s;}
    .class-item a{padding: 2px; color: #343a40; text-decoration: none; transition: .5s;}
    .class-item:hover{
        transform: translateX(15px);
        background: #6cbd45;
    }
    .class-item:hover h4 a {
      color: #fff; }
    .class-item:hover p, .class-item:hover span {
      color: rgb(158, 239, 119); 
    }
</style>

<div class="card p-3" style="box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3); border-radius: 10px;">
    <h4 class="text-muted m-0">About {{ count }} results for <b><em class="text-orange"> {{ query }}</em></b></h4>
    <hr>
    {% for object in object_list %}
        {% with object|class_name as klass %}
        {% if klass == 'Program' %}
            <div class="session-wrapper">
                <div class="session"><div class="info-text bg-orange">Program</div></div>
            </div>
            <div class='col-12 class-item'>
                <!-- <p><b>Program of</b> {{ object }}</p> -->
                <h4><a href='{{ object.get_absolute_url }}'><b>{{ object.title}}</b></a></h4>
                <p>{{ object.summary }}</p>
            </div><hr>

        {% elif klass == 'Course' %}
            <div class="session-wrapper">
                <div class="session"><div class="info-text bg-orange">Course</div></div>
            </div>
            <div class='col-12 class-item'>
                <p><b>Program of</b> {{ object.program }}</p>
                <h4><a href='{{ object.get_absolute_url }}'><b>{{ object }}</b></a></h4>
                <p>{{ object.summary }}</p>
            </div><hr>
            
        {% elif klass == 'NewsAndEvents' %}
            <div class="session-wrapper">
                <div class="session"><div class="info-text bg-orange">News And Events</div></div>
            </div>
            <div class='col-12 class-item'>
                <p><b>Date: </b> {{ object.updated_date|timesince }} ago</p>
                <h4><a href='{{ object.get_absolute_url }}'><b>{{ object.title }}</b></a></h4>
                <p>{{ object.summary }}</p>
            </div><hr>

        {% elif klass == 'Quiz' %}
            <div class="session-wrapper">
                <div class="session"><div class="info-text bg-orange">Quiz</div></div>
            </div>
            <div class='col-12 class-item'>
                <p>{{ object.category }} quiz,  <b>Course:</b> {{ object.course }}</p>
                <h4><a href='{{ object.get_absolute_url }}'><b>{{ object.title }}</b></a></h4>
                <p>{{ object.description }}</p>
            </div><hr>

        {% else %}
            <div class="session-wrapper">
                <div class="session"><div class="info-text bg-orange">Program</div></div>
            </div>
            <div class='col-12 col-lg-8 offset-lg-4'>
                <a href='{{ object.get_absolute_url }}' class="class-item d-flex">{{ object }} | {{ object|class_name }}</a>
            </div><hr>
            <div class='col-12 class-item'>
                <h4><a href='{{ object.get_absolute_url }}'>{{ object }} | <b>{{ object|class_name }}</b></a></h4>
                <p>{{ object.description }}</p>
            </div><hr>
        {% endif %}

        {% endwith %}

{% empty %}

<div class='row'>
    <div class="col-12 text-center"><p><i class="far fa-frown fa-2x"></i> No result for your search</p></div>
    <div class='col-12 col-md-6 mx-auto my-5 py-5'>
    <form method='GET' class='' action='.'>
    
        <div class="input-group form-group-no-border mx-auto" style="margin-bottom: 0px; font-size: 32px;">
            <input type="text" name="q" data-toggle="popover" data-placement="bottom" data-content="Press enter to search" class="form-control cfe-nav mt-0 py-3" placeholder="Search..." value="{{ request.GET.q }}" data-original-title="" title="" autofocus="autofocus" required>
            <button type="submit" class="btn btn-outline-secondary">
                <i class="fa fa-search" aria-hidden="true"></i>
            </span>
        </div>

    </form>

    </div>
    <div class="col-12 pl-5">
    <h5>Search by using:</h5>
    <ul class="pl-3">
        <li>Program <span class="text-orange">></span> Title or Description</li>
        <li>Course <span class="text-orange">></span> Title, Code or Description</li>
        <li>News And Events <span class="text-orange">></span> Title, Description or just by typing "news" or "event"</li>
        <li>Quiz <span class="text-orange">></span> Title, Description or Category(practice, assignment and exam)</li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    </div>
</div>

{% endfor %}
</div>

{% endblock content %}