<form wire:submit.prevent="save">
    @if($header)
        <div
            class="d-flex flex-column justify-content-center"
            wire:ignore
            x-data="{
                setUp() {
                    const cropper = new Cropper(document.getElementById('header'), {
                        aspectRatio: 1.46,
                        autoCropArea: 1,
                        viewMode: 1,
                        crop (event) {
                            @this.set('x', event.detail.x)
                            @this.set('y', event.detail.y)
                            @this.set('width', event.detail.width)
                            @this.set('height', event.detail.height)
                        }
                    })
                }
            }"
            x-init="setUp"
        >
            <div class="d-flex justify-content-center text-center mt-4 mb-4">
                <img id="header" src="{{ $header->temporaryUrl() }}" style="width: 100%; max-width: 270px; margin:5px auto;">
            </div>
            <div class="d-flex justify-content-end text-end mt-4 mb-4">
                <button type="submit" class="btn btn-gradient btn-small">
                    <span>Save Profile Header</span>
                </button>
            </div>
        </div>
    @else
        <div class="mb-2 mx-2">
            <label for="header" style="width: 100%;">
                <img src="{{ auth()->user()->artists()->first()->header() }}" style="width: 100%; max-width: 270px; margin:5px auto;">
            </label>
        </div>
        <div class="mb-2 mx-2">
            <input type="file" name="header" id="header" class="sr-only" wire:model="header">
        </div>
    @endif
</form>