{% extends "layout/layout.html" %}

{% block content %}
{% include "../templates/layout/header-footer/header-home2.html" %}

{% set page_title = "Find Job" %}
{% set current_page = "Find Job" %}


{% include "../templates/components/breadcrumbs/breadcrumbs2.html" %}

<div class="joblist-content">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="joblist-left-content2 rt-pt-20">
                    <div class="d-flex flex-wrap">
                        <div class="flex-grow-1 rt-mb-20">
                            <div class="filtertags">
                                <div class="single-tag">
                                    Design 
                                    <span class="close-tag pointer">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z" fill="white"/>
                                            <path d="M12.9995 7L6.99951 13" stroke="#636A80" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M6.99951 7L12.9995 13" stroke="#636A80" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg> 
                                    </span>
                                </div>
                                <div class="single-tag">
                                    New York
                                    <span class="close-tag pointer">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z" fill="white"/>
                                            <path d="M12.9995 7L6.99951 13" stroke="#636A80" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M6.99951 7L12.9995 13" stroke="#636A80" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg> 
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="flex-grow-0 rt-mb-20">
                            <div class="joblist-fliter-gorup">
                                <div class="left-content">
                                    <select class="rt-selectactive gap" name="from" style="width: 100%">
                                        <option>Latest</option>
                                        <option value="2">Marketing Officer</option>
                                        <option value="3">Marketing Manager</option>
                                        <option value="4">UI/UX Designer</option>
                                        <option value="5">Junior Graphic Designer</option>
                                        <option value="6">Product Designer</option>
                                        <option value="7">Techical Support Specialist</option>
                                        <option value="8">Front End Developer</option>
                                    </select>
                                    <select class="rt-selectactive " name="from" style="width: 100%">
                                        <option>12 per page</option>
                                        <option value="2">Visual Designer</option>
                                        <option value="3">Project Manager</option>
                                        <option value="4">Software Engineer</option>
                                        <option value="5">Interaction Designer</option>
                                        <option value="6">Product Designer</option>
                                        <option value="7">Front End Developer</option>
                                        <option value="8">Networking Engineer</option>
                                    </select>
                                </div>
                                <div class="right-content">
                                    <nav>
                                        <div class="nav" id="nav-tab" role="tablist">
                                          <button class="nav-link active " id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">
                                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M8 3H4C3.44772 3 3 3.44772 3 4V8C3 8.55228 3.44772 9 4 9H8C8.55228 9 9 8.55228 9 8V4C9 3.44772 8.55228 3 8 3Z" fill="#191F33"/>
                                                <path d="M16 3H12C11.4477 3 11 3.44772 11 4V8C11 8.55228 11.4477 9 12 9H16C16.5523 9 17 8.55228 17 8V4C17 3.44772 16.5523 3 16 3Z" fill="#191F33"/>
                                                <path d="M16 11H12C11.4477 11 11 11.4477 11 12V16C11 16.5523 11.4477 17 12 17H16C16.5523 17 17 16.5523 17 16V12C17 11.4477 16.5523 11 16 11Z" fill="#191F33"/>
                                                <path d="M8 11H4C3.44772 11 3 11.4477 3 12V16C3 16.5523 3.44772 17 4 17H8C8.55228 17 9 16.5523 9 16V12C9 11.4477 8.55228 11 8 11Z" fill="#191F33"/>
                                            </svg>
                                          </button>
                                          <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">
                                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M16 3H4C3.44772 3 3 3.44772 3 4V8C3 8.55228 3.44772 9 4 9H16C16.5523 9 17 8.55228 17 8V4C17 3.44772 16.5523 3 16 3Z" fill="#939AAD"/>
                                                <path d="M16 3H12C11.4477 3 11 3.44772 11 4V8C11 8.55228 11.4477 9 12 9H16C16.5523 9 17 8.55228 17 8V4C17 3.44772 16.5523 3 16 3Z" fill="#939AAD"/>
                                                <path d="M16 11H12C11.4477 11 11 11.4477 11 12V16C11 16.5523 11.4477 17 12 17H16C16.5523 17 17 16.5523 17 16V12C17 11.4477 16.5523 11 16 11Z" fill="#939AAD"/>
                                                <path d="M16 11H4C3.44772 11 3 11.4477 3 12V16C3 16.5523 3.44772 17 4 17H16C16.5523 17 17 16.5523 17 16V12C17 11.4477 16.5523 11 16 11Z" fill="#939AAD"/>
                                            </svg>
                                          </button>
                                          
                                        </div>
                                      </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <hr class="rt-p-0 rt-m-0">
                <div class="rt-spacer-50"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane  show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                            <div class="row">
                                {% include "../templates/components/job/filterjob-three-column.html" %}
                            </div>
                            <div class="rt-pt-30">
                                {% include "../templates/components/pagination/pagination.html" %}
                            </div>
                        </div>
                        <div class="tab-pane " id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                            {% include "../templates/components/job/feature-job-forjoblistpage.html" %}
                            <div class="rt-pt-30">
                                {% include "../templates/components/pagination/pagination.html" %}
                            </div>
                        </div>
                      </div>
            </div>
        </div>
    </div>
</div>
<div class="rt-spacer-100 rt-spacer-md-50"></div>
{% include "../templates/layout/header-footer/footer-three.html" %}
{% endblock %}