{{ partial:partials.navbar.navbar }}

<main>
    <!-- Section 1 -->
    <section id="section-1">
        <div id="jumbotron" class="w-full lg:max-h-[600px] overflow-hidden">
            <div
                class="w-full min-h-[600px] lg:bg-[#393939] flex flex-col lg:flex-row lg:justify-end"
            >
                <div
                    class="w-full lg:w-1/3 bg-[#393939] text-white flex justify-end items-center"
                >
                    <div
                        class="w-full lg:w-[325px] pl-[30px] sm:pl-[90px] md:pl-[140px] lg:pl-0 pr-4 py-[82px]"
                    >
                        <h1
                            class="w-max lg:w-auto text-[34px] lg:text-[40px] font-bold leading-tight"
                        >
                            {{title_sec_1}}
                        </h1>
                        <div class="my-4">{{partial:big-line-svg}}</div>
                        <p class="text-xl italic">{{subtitle_sec_1}}</p>
                    </div>
                </div>
                <div
                    class="w-full flex justify-center items-center lg:w-2/3 sm:min-h-[600px] overflow-hidden"
                >
                    {{assets:image}}
                    <img
                        id="primaryimage"
                        srcset="{{ glide:url width='360' }} 360w,
                                {{ glide:url width='640' }} 640w,
                                {{ glide:url width='768' }} 768w,
                                {{ glide:url width='1024' }} 1024w,
                                {{ glide:url width='1280' }} 1280w,
                                {{ glide:url width='1536' }} 1536w"
                        sizes="(min-width: 1536px) 1536px,
                            (min-width: 1280px) 1280px,
                            (min-width: 1024px) 1024px,
                            (min-width: 768px) 768px,
                            (min-width: 640px) 640px,
                            100vw"
                        data-src="{{ glide:url width='360' }}"
                        alt="{{ alt }}"
                        class="w-full object-cover h-[320px] sm:h-[551px] md:h-[600px]"
                    />
                    {{/assets:image}}
                </div>
            </div>
        </div>
    </section>
    <!-- Section 2 -->
    <section id="section-2">
        <div class="max-w-3xl lg:max-w-5xl xl:max-w-7xl mx-auto w-full my-8">
            {{partial:breadcrumbs}}
        </div>
        <div class="pt-[30px] pb-[65px] px-12 lg:px-[100px]">
            <div class="pb-[30px] lg:pb-[50px] text-center w-full">
                <h1 class="text-[40px] font-bold">{{title_sec_2}}</h1>

                <div class="mt-2 mb-6 w-max mx-auto">{{partial:line-svg}}</div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
                {{data_career}}
                <div class="w-full px-4 py-6">
                    <h4 class="text-2xl font-bold mb-2">{{job_position}}</h4>
                    <p class="text-base font-semibold">Deskripsi Pekerjaan :</p>
                    <div class="text-[15px] my-4">
                        <div
                            class="[&>ul]:list-disc [&>ul]:pl-5 [&>ul]:space-y-2"
                        >
                            {{job_description | markdown}}
                        </div>
                    </div>
                    <p class="text-base font-semibold">Kualifikasi :</p>
                    <div class="text-[15px] my-4">
                        <div
                            class="[&>ul]:list-disc [&>ul]:pl-5 [&>ul]:space-y-2"
                        >
                            {{qualification | markdown}}
                        </div>
                    </div>
                    <a class="text-xl font-bold uppercase" href="{{link_apply}}"
                        >{{label_apply}}</a
                    >
                </div>
                {{/data_career}}
            </div>
            <div>
                <p class="font-bold text-[15px]">{{description_sec_3}}</p>
            </div>
        </div>
    </section>
    <!-- Section 3 -->
    <section id="section-3" class="hidden">
        {{ form:form_career class="max-w-2xl mx-auto" files="true" }}
        <!-- success -->
        {{ if success }}
        <div class="bg-green-500 text-white p-4 rounded-lg shadow-md mb-6">
            {{ success }}
        </div>
        {{ else }}
        <!-- error -->
        {{ if errors }}
        <div class="bg-red-500 text-white p-4 rounded-lg shadow-md mb-6">
            {{ errors }} {{ value }}<br />
            {{ /errors }}
        </div>
        {{ /if }}

        <!-- input fields -->
        <div class="p-8 mb-6" id="APPLY">
            {{ fields }} {{ if handle !== 'captcha' }}

            <div class="mb-4">
                <label
                    class="block w-full text-[#4C4B4B] text-sm mb-2"
                    for="{{ handle }}"
                >
                    {{ display }}
                </label>
                <div
                    class="mt-1 [&>input]:w-full [&>input]:bg-gray-100 [&>input]:px-3 [&>input]:py-3 [&>input]:outline-none [&>textarea]:px-3 [&>textarea]:py-3 [&>textarea]:outline-none [&>textarea]:w-full [&>textarea]:bg-gray-100 [&>input[type='file']]:bg-white [&>input[type='file']]:text-gray-500 [&>input[type='file']]:text-sm"
                >
                    {{ field }}
                </div>
                {{ if error }}
                <p class="mt-1 text-sm text-red-600">{{ error }}</p>
                {{ /if }}
            </div>
            {{/if}} {{ /fields }}

            <input
                type="text"
                class="hidden"
                name="{{ honeypot ?? 'honeypot' }}"
            />

            <div class="mb-4">
                <div class="flex gap-6 items-center mb-2">
                    <label class="text-sm text-gray-500" for="captcha"
                        >Input this code:</label
                    >
                    <div>{{$ captcha_img('flat') $}}</div>
                </div>
                <input
                    class="mt-1 w-full bg-gray-100 px-3 py-3 outline-none"
                    type="text"
                    name="captcha"
                    id="captcha"
                />
                {{ if error }}
                <p class="mt-1 text-sm text-red-600">{{ error }}</p>
                {{ /if }}
            </div>

            <button
                type="submit"
                class="bg-black hover:bg-black/60 text-white font-bold py-4 tracking-widest px-10 transition duration-300 ease-in-out"
            >
                SUBMIT
            </button>
        </div>
        {{ /if }} {{ /form:form_career }}
    </section>
</main>