@section('meta_title', __('site.Create an access token'))
@section('h1', __('site.Create an access token'))
<x-layout.site>
    <form method="post" id="token-store">
        @csrf
        <x-site.forms.input :title="__('validation.attributes.name')" name="name" type="text" value="" required autofocus />
        <x-site.forms.select :title="__('validation.attributes.permissions')" name="permissions" :list="$permissions"></x-site.forms.select>

        <div class="form-block">
            <button class="button" type="submit">{{ __('Create') }}</button>
        </div>
    </form>

    @push('scripts')
        <div id="generated-token" style="display: none;">
            <div class="generated-token__content">
                <div class="generated-token__content__head">
                    {{ __('Token created') }}
                </div>
                <p>{{ __('Token Name') }}:<br><span id="generated-token-name"></span></p>
                <p>{{ __('Access Permissions') }}:<br><span id="generated-token-permissions"></span></p>
                <p><strong>{{ __('To use the access token from your Docker CLI client:') }}</strong></p>
                <p><strong>1. {{ __('Run command') }}</strong></p>
                <div class="block-copy">
                    <span class="block-copy-text">docker login {{ $serviceAddress }} -u {{ $user->username }}</span>
                    <button type="button" data-default="{{ __('Copy') }}" data-copy-error="{{ __('Error copy') }}" data-copy-success="{{ __('Copied') }}">{{ __('Copy') }}</button>
                </div>
                <p><strong>2. {{ __('At the password prompt, enter the personal access token.') }}</strong></p>
                <div class="block-copy">
                    <span class="block-copy-text" id="generated-token-text"></span>
                    <button type="button" data-default="{{ __('Copy') }}" data-copy-error="{{ __('Error copy') }}" data-copy-success="{{ __('Copied') }}">{{ __('Copy') }}</button>
                </div>
                <p class="warning"><strong>{{ __('WARNING') }}</strong>: {{ __('This access token will only be displayed once. It will not be stored and cannot be retrieved. Please be sure to save it now.') }}</p>
                <a href="{{ route('profile.access-tokens.index') }}" class="button">{{ __('OK, I saved it') }}</a>
            </div>
        </div>
        <script>
            (function() {
                let formTokenStore = document.querySelector('#token-store');
                if (formTokenStore) {
                    formTokenStore.addEventListener('submit', function(event) {
                        event.preventDefault();
                        [].slice.call(document.querySelector('#content').querySelectorAll('.alert.alert-danger')).map(function(el) {
                            el.remove();
                        });

                        axios.post(
                            '{{ route('profile.access-tokens.store') }}',
                            formTokenStore,
                            {
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                            }
                        )
                        .then(response => {
                            let blockToken = document.querySelector('#generated-token');
                            if (!blockToken) {
                                return null;
                            }
                            blockToken.querySelector('#generated-token-name').textContent = response.data.name;
                            blockToken.querySelector('#generated-token-permissions').textContent = response.data.permission;
                            blockToken.querySelector('#generated-token-text').textContent = response.data.token;
                            blockToken.style.display = 'block';
                        })
                        .catch(error => {
                            let messages = '<ul>';
                            if (error.response && error.response.data && error.response.data.errors) {
                                for (let key in error.response.data.errors) {
                                    messages += '<li>' + error.response.data.errors[key] + '</li>';
                                }
                            } else {
                                messages += '<li>{{ __('Server Error') }}</li>';
                                messages += '<li>' + error + '</li>';
                            }
                            messages += '</ul>';

                            let container = document.createElement("div");
                            container.classList = 'alert alert-danger';
                            container.setAttribute('role', 'alert');
                            container.innerHTML = messages;
                            document.querySelector('#content').querySelector('h1').after(container);
                        });
                    });
                }
            })();
        </script>
    @endpush
</x-layout.site>