{% extends '../layout.server.view.html' %}{% block content %}
<!-- Font Awesome -->
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> -->
<link href="/assets/frontend/layout/css/recruitment.css" rel="stylesheet">

<!-- Bootstrap core CSS -->
<div class="recruitment-header">
    <div class="container">
        <div class="row title">
            <h1 data-title="HDV Tuyển Dụng">HDV Tuyển Dụng</h1>
        </div>
    </div>
</div>
<!-- banner -->
<div class="recruitment-title">
    <div class="container">
        <div class="row">
            <div class="block-title">
                <h2>
                    <span>Tuyển Dụng </span>
                    <span style="color: #0093DD;">Hóa Đơn Việt</span>
                </h2>
                <p class="italic">Tin Tức Tuyển Dụng</p>
            </div>
        </div>
    </div>
</div>

<div class="recruitment-filter">
    <div class="container">
        <div class="row">

            <!-- Grid column -->
            <div class="col-md-12 d-flex justify-content-center mb-5">
                <button type="button" class="btn btn-outline-black waves-effect filter" data-rel="all">Tất cả các vị
                    trí</button>

                {% for item in recruitment %}
                <button type="button" class="btn btn-outline-black waves-effect filter" data-rel="{{item.TYPE}}"
                    title="{{item.TYPE}}">{{item.TYPE}}</button>
                {% endfor %}
                <!-- <button type="button" class="btn btn-outline-black waves-effect filter" data-rel="dev">Developer</button>
                <button type="button" class="btn btn-outline-black waves-effect filter" data-rel="tester">Tester</button> -->

            </div>
            <!-- Grid column -->
        </div>
    </div>
</div>
<!-- Grid row -->

<!-- Grid row -->
<div class="recruitment-content">
    <div class="container">
        <div class="row">
            <div class="gallery" id="gallery">
                {% for item in recruitment %}
                <div class="mb-12 pics animation all {{item.TYPE}}">
                    <div class="col-sm-5">
                        <img src="{{item.IMG_URL}}" style="width:100%;" />
                    </div>
                    <div class="col-sm-7">
                        <p>{{item.DESCRIPTION}}</p>
                        <p class="salary">
                            <span>
                                <strong>
                                    Số lượng:
                                </strong>
                            </span>
                            <span>
                                {{item.QUANTITY}}
                            </span>
                        </p>
                        <p class="date-time">
                            <span>
                                <strong>
                                    Thời gian:
                                </strong>
                            </span>
                            <span>
                                {{item.FROM_DATE | date('d/m/Y') }} - {{item.TO_DATE | date('d/m/Y') }}
                            </span>
                        </p>
                        <a href="/tuyen-dung-chi-tiet/{{item.TITLE_URL}}">
                            <button class="btn-more">
                                Chi tiết
                            </button>
                        </a>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>

    </div>
</div>

<!-- Grid row -->

<script src="/js/jquery.min.js"></script>
<script>

    $(function() {
        var selectedClass = "";
        $(".filter").click(function() {
            selectedClass = $(this).attr("data-rel");
            $("#gallery").fadeTo(100, 0.1);
            $("#gallery div").not("." + selectedClass).fadeOut().removeClass('animation');
            setTimeout(function() {
                $("." + selectedClass).fadeIn().addClass('animation');
                $("#gallery").fadeTo(300, 1);
            }, 300);
        });
    });
</script>
{% endblock %}