@extends('layouts.app')

@section('header')
    <title>{{ trans('code_of_ethics_page.meta.title') }}</title>
    <meta name="title" content="{{ trans('code_of_ethics_page.meta.title') }}">
    <meta name="description" content="{{ trans('code_of_ethics_page.meta.description') }}">
    <meta name="keywords" content="">
    <meta name="robots" content="index,follow">

    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ localized_route('home_page') }}">
    <meta property="og:title" content="{{ trans('code_of_ethics_page.meta.title') }}">
    <meta property="og:description" content="{{ trans('code_of_ethics_page.meta.description') }}">
    <meta property="og:image" content="{{ asset(mix('build/images/logo/logo.svg')) }}">

    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="{{ localized_route('home_page') }}/">
    <meta property="twitter:title" content="{{ trans('code_of_ethics_page.meta.title') }}">
    <meta property="twitter:description" content="{{ trans('code_of_ethics_page.meta.description') }}">
    <meta property="twitter:image" content="{{ asset(mix('build/images/logo/logo.svg')) }}">

    @foreach(locales() as $locale)
        <link rel="alternate" hreflang="{{ config('locales.iso_friendly.' . $locale,$locale) }}" href="{{ current_route($locale) }}"/>
    @endforeach
    <link rel="alternate" hreflang="x-default" href="{{ current_route('sk') }}"/>

    <link rel="canonical" href="{{ current_route() }}" />
@endsection

@section('content')
    <main class="flex-auto flex flex-col relative bg-slate-50">
        <div class="relative container">
            <div class="pt-[60px] pb-[200px] sm:px-[32px] lg:pt-[100px] lg:px-[100px] lg:pb-[300px] xl:px-[200px]">
                <h1 class="text-[20px] leading-none font-bold uppercase border-l-[10px] pl-[16px] max-w-screen-lg mx-auto border-slate-700 text-slate-700 sm:text-[30px] md:text-[40px] md:pl-[24px] lg:text-[45px] lg:border-l-[16px] lg:pl-[32px] 2xl:text-[50px]">{{ trans('code_of_ethics_page.text1') }}</h1>
                <div class="relative mt-[60px] bg-white rounded-xl shadow-2xl overflow-hidden max-w-screen-lg w-full mx-auto shadow-gray-200 lg:mt-[100px]">
                    <div class="bg-slate-800 bg-center bg-cover px-[16px] py-[40px] xs:px-[32px] lg:px-[48px] lg:py-[54px]">
                        <h2 class="text-white relative text-center font-bold text-shadow-[0px_0px_5px_#435760] leading-tight text-[18px] sm:text-[20px] lg:text-[24px]">{{ trans('code_of_ethics_page.text17') }}</h2>
                    </div>
                    <div class="bg-slate-200 px-[16px] py-[32px] xs:px-[32px] lg:px-[48px] lg:py-[54px]">
                        <p class="relative z-[1] text-black font-bold lg:text-[18px]">{{ trans('code_of_ethics_page.text18') }}</p>
                    </div>
                </div>
                <div class="mt-[16px] mx-auto w-[100px]">
                    <img src="{{ asset(mix('build/images/holubica.svg')) }}" alt="Bird icon" width="192" height="150" class="w-full">
                </div>
                <div class="mt-[60px] bg-white shadow-2xl rounded-xl max-w-screen-lg w-full mx-auto px-[16px] py-[40px] shadow-gray-200 xs:px-[32px] lg:mt-[100px] lg:px-[48px] lg:py-[54px]">
                    <h2 class="text-slate-700 font-bold leading-tight text-[18px] sm:text-[20px] lg:text-[24px]">{{ trans('code_of_ethics_page.text2') }}</h2>
                    <p class="mt-[16px] sm:mt-[32px] lg:text-[18px]">{{ trans('code_of_ethics_page.text3') }}</p>
                    <h2 class="text-slate-700 font-bold leading-tight text-[18px] sm:text-[20px] lg:text-[24px] mt-[32px] sm:mt-[40px] lg:mt-[48px]">{{ trans('code_of_ethics_page.text4') }}</h2>
                    <p class="mt-[16px] sm:mt-[32px] lg:text-[18px]">{{ trans('code_of_ethics_page.text5') }}</p>
                    <h2 class="text-slate-700 font-bold leading-tight text-[18px] sm:text-[20px] lg:text-[24px] mt-[32px] sm:mt-[40px] lg:mt-[48px]">{{ trans('code_of_ethics_page.text6') }}</h2>
                    <p class="mt-[16px] sm:mt-[32px] lg:text-[18px]">{{ trans('code_of_ethics_page.text7') }}</p>
                    <h2 class="text-slate-700 font-bold leading-tight text-[18px] sm:text-[20px] lg:text-[24px] mt-[32px] sm:mt-[40px] lg:mt-[48px]">{{ trans('code_of_ethics_page.text8') }}</h2>
                    <p class="mt-[16px] sm:mt-[32px] lg:text-[18px]">{{ trans('code_of_ethics_page.text9') }}</p>
                    <h2 class="text-slate-700 font-bold leading-tight text-[18px] sm:text-[20px] lg:text-[24px] mt-[32px] sm:mt-[40px] lg:mt-[48px]">{{ trans('code_of_ethics_page.text10') }}</h2>
                    <p class="mt-[16px] sm:mt-[32px] lg:text-[18px]">{{ trans('code_of_ethics_page.text11') }}</p>
                    <h2 class="text-slate-700 font-bold leading-tight text-[18px] sm:text-[20px] lg:text-[24px] mt-[32px] sm:mt-[40px] lg:mt-[48px]">{{ trans('code_of_ethics_page.text12') }}</h2>
                    <p class="mt-[16px] sm:mt-[32px] lg:text-[18px]">{{ trans('code_of_ethics_page.text13') }}</p>
                    <h2 class="text-slate-700 font-bold leading-tight text-[18px] sm:text-[20px] lg:text-[24px] mt-[32px] sm:mt-[40px] lg:mt-[48px]">{{ trans('code_of_ethics_page.text14') }}</h2>
                    <p class="mt-[16px] sm:mt-[32px] lg:text-[18px]">{{ trans('code_of_ethics_page.text15') }}</p>
                </div>
                <div class="mt-[60px] bg-white shadow-2xl rounded-xl max-w-screen-lg w-full mx-auto px-[16px] py-[40px] shadow-gray-200 xs:px-[32px] lg:mt-[100px] lg:px-[48px] lg:py-[54px]">
                    <p class="font-bold lg:text-[18px]">{{ trans('code_of_ethics_page.text16') }}</p>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('scripts')
@endpush