{% extends 'base.html' %}
{% block body_content %}
<div class="cards">
    <div class="card-body">
        <div class="row">
            <div class="col-12 mb-2">
                <h1 class="h2 text-center">Latest Jobs</h1>
            </div>
        </div>
       
        <section class="bg-light-gray">
            <div class="row">
                {% for job in jobs %}
                <div class="col-md-4 col-sm-6 portfolio-item wow fadeInUp d-flex" data-wow-delay="0.25s" style="visibility: visible; animation-delay: 0.25s; animation-name: fadeInUp;">
                    <div class="portfolio-caption inline-block">
                        <h4><a href="{{ job.get_absolute_url }}" style="color:black;">{{ job.title|truncatechars:50 }}</a></h4>
                        <p>&nbsp;</p>
                        <p class="text-muted"></p>
                        <p>{{job.description|truncatechars:120}}</p>
                        <p class="text-right"><a href="{% url 'jobs:job_apply' job.pk %}">Apply</a></p>
                    </div>
                </div>
                {% endfor %}
            </div>

        </section>


    </div>
</div>
<style>
    .portfolio-item {
        right: 0;
        margin: 0 0 15px;
        text-align: center;
        padding-left: 15px;
        padding-right: 15px;
    }

    .portfolio-item .portfolio-link {
        display: block;
        position: relative;
        margin: 0 auto;
        max-width: 400px;
    }

    .portfolio-item .portfolio-link .portfolio-hover {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        background: rgba(254, 209, 54, .9);
        -webkit-transition: all ease .5s;
        -moz-transition: all ease .5s;
        transition: all ease .5s;
    }

    .portfolio-item .portfolio-link .portfolio-hover:hover {
        opacity: 1;
    }

    .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
        position: absolute;
        top: 50%;
        width: 100%;
        height: 20px;
        margin-top: -12px;
        text-align: center;
        font-size: 20px;
        color: #fff;
    }

    .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
        margin-top: -12px;
    }

    .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
    .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
        margin: 0;
    }

    .portfolio-item .portfolio-caption {
        padding: 25px;
        max-width: 400px;
        text-align: center;
        background-color: #fff;
        width: 100%;
    }

    .portfolio-item .portfolio-caption h4 {
        margin: 0 0 17px;
        text-transform: none;
        color: #494949;
    }

    .inline-block {
        display: inline-block
    }

    body {
        background-color: #f7f7f7;
    }
</style>
{% endblock %}