@props(['socialLink' => null, 'nextSortOrder' => 0])

@php
    $platforms = [
        'facebook' => 'Facebook',
        'linkedin' => 'LinkedIn',
        'instagram' => 'Instagram',
        'github' => 'GitHub',
        'behance' => 'Behance',
        'dribbble' => 'Dribbble',
        'youtube' => 'YouTube',
        'x' => 'X (Twitter)',
        'threads' => 'Threads',
        'custom' => 'Custom / Other',
    ];
    $selectedPlatform = old('platform', $socialLink->platform ?? 'facebook');
@endphp

<div class="mb-3">
    <label for="platform" class="form-label">Platform</label>
    <select
        name="platform"
        id="platform"
        class="form-select @error('platform') is-invalid @enderror"
        onchange="document.getElementById('custom-fields').classList.toggle('d-none', this.value !== 'custom')"
    >
        @foreach($platforms as $value => $name)
            <option value="{{ $value }}" @selected($selectedPlatform === $value)>{{ $name }}</option>
        @endforeach
    </select>
    <div class="form-text">Named platforms use a built-in icon automatically. Pick "Custom / Other" for anything else.</div>
    @error('platform')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

<div id="custom-fields" class="{{ $selectedPlatform === 'custom' ? '' : 'd-none' }}">
    <div class="row">
        <div class="col-md-6 mb-3">
            <label for="label" class="form-label">Label</label>
            <input
                type="text"
                name="label"
                id="label"
                class="form-control @error('label') is-invalid @enderror"
                value="{{ old('label', $socialLink->label ?? '') }}"
                placeholder="e.g. Mastodon"
                maxlength="100"
            >
            @error('label')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-md-6 mb-3">
            <label for="icon_class" class="form-label">Icon class</label>
            <input
                type="text"
                name="icon_class"
                id="icon_class"
                class="form-control @error('icon_class') is-invalid @enderror"
                value="{{ old('icon_class', $socialLink->icon_class ?? '') }}"
                placeholder="e.g. fa-brands fa-mastodon"
            >
            <div class="form-text">A Font Awesome class — never an emoji.</div>
            @error('icon_class')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
    </div>
</div>

<div class="mb-3">
    <label for="url" class="form-label">Profile URL</label>
    <input
        type="url"
        name="url"
        id="url"
        class="form-control @error('url') is-invalid @enderror"
        value="{{ old('url', $socialLink->url ?? '') }}"
        placeholder="https://..."
        maxlength="2048"
        required
    >
    @error('url')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

<div class="row">
    <div class="col-md-6 mb-3">
        <label for="sort_order" class="form-label">Sort Order</label>
        <input
            type="number"
            name="sort_order"
            id="sort_order"
            class="form-control @error('sort_order') is-invalid @enderror"
            value="{{ old('sort_order', $socialLink->sort_order ?? $nextSortOrder) }}"
            min="0"
            max="9999"
        >
        @error('sort_order')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-6 mb-3 d-flex flex-column justify-content-center">
        <div class="form-check mt-md-4">
            <input type="checkbox" name="open_new_tab" id="open_new_tab" class="form-check-input" value="1" @checked(old('open_new_tab', $socialLink->open_new_tab ?? true))>
            <label for="open_new_tab" class="form-check-label">Open in a new tab</label>
        </div>
    </div>
</div>

<div class="form-check mb-4">
    <input type="checkbox" name="is_visible" id="is_visible" class="form-check-input" value="1" @checked(old('is_visible', $socialLink->is_visible ?? true))>
    <label for="is_visible" class="form-check-label">Visible on the public site</label>
</div>