@extends('layouts.app')

@section('seo')
    <x-seo :title="'Contact Us | '.setting('site_name', 'InstaGrab')"
           description="Questions, feedback or copyright concerns - here is how to reach the InstaGrab team." />
@endsection

@section('content')
<section class="page-head">
    <div class="container">
        <x-breadcrumbs :items="[['name' => 'Home', 'url' => route('home')], ['name' => 'Contact', 'url' => route('page.contact')]]" />
        <h1 class="page-title">Contact us</h1>
    </div>
</section>

<section class="section pt-4">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-7">
                @if(session('status'))
                    <x-alert type="success">{{ session('status') }}</x-alert>
                @endif

                <form method="POST" action="{{ route('contact.store') }}" class="card card-body form-card" novalidate>
                    @csrf
                    {{-- Honeypot: hidden from humans, bots fill it and get rejected --}}
                    <div class="hp-field" aria-hidden="true">
                        <label for="website">Website</label>
                        <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
                    </div>

                    <div class="mb-3">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror" id="name"
                               name="name" value="{{ old('name') }}" maxlength="100" required>
                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control @error('email') is-invalid @enderror" id="email"
                               name="email" value="{{ old('email') }}" maxlength="190" required>
                        @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <label for="message" class="form-label">Message</label>
                        <textarea class="form-control @error('message') is-invalid @enderror" id="message"
                                  name="message" rows="6" maxlength="3000" required>{{ old('message') }}</textarea>
                        @error('message')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <button type="submit" class="btn btn-gradient align-self-start px-4">Send message</button>
                </form>

                <p class="small text-body-secondary mt-3">
                    For copyright matters, use the process on our <a href="{{ route('page.dmca') }}">DMCA page</a>.
                </p>
            </div>
        </div>
    </div>
</section>
@endsection