@extends('mix::layouts.master')
@section('title', __('Social'))
@section('namespace', 'user-mix-settings-social')
@section('content')
@section('back-button', route('user-mix-settings'))

<div class="dashhead flex-col sm:flex-row mb-5">
	<div class="flex">
		<div class="-icon">
			{!! ori('custom', 'settings-megaphone-1') !!}
		</div>

		<div class="-content">
			<p class="--title my-auto">{{ __('Settings') }}
				<span class="text-gray-400 text-sm">{{ __('/ Social') }}</span>
			</p>
		</div>
	</div>
</div>

<form method="post" action="{{ route('user-mix-settings-post', 'social') }}">
	@csrf

	<div class="koon-white-card">
		<div class="links-accordion relative">
			
			<div class="sortable grid grid-cols-1 md:grid-cols-2 gap-4" data-handle=".handle">
				@foreach ($socials as $key => $items)
				<div class="sandy-accordion koon-grey-bg- bg-white border border-solid border-gray-200 sortable-item m-0">
					<div class="sandy-accordion-head flex remove-before justify-between">
						<span class="flex items-center">
							
							<span class="mr-2 bg-black h-10 w-10 flex items-center justify-center rounded-full"><em class="{{ ao($items, 'icon') }}  text-white"></em></span>  {{ ao($items, 'name') }}</span>
						
						<span class="drag mr-0 handle cursor-move koon-grey-bg h-7 w-7 flex items-center justify-center rounded-full"><i class="sni sni-move"></i></span>
					</div>
					<div class="sandy-accordion-body mt-5 pb-0 block">
						
						@php
						$address = ao($items, 'address') == '%s' ? __('{link}') : '{username}';
						@endphp
						<div class="form-input">
							<input type="text" class="bg-w-" value="{{ user('social.'.$key) ?? '' }}" name="socials[{{$key}}]" placeholder="{{ ao($items, 'placeholder') }}">
						</div>

						@if (config('sandy.sandysocials.' . $key) && Route::has("sandy-socialstream-$key-connect"))
							<a class="koon-btn-dark rounded-full h-9 w-full py-2 text-xs mt-5 setup-flow-open" href="{{ route("sandy-socialstream-$key-connect") }}" app-sandy-prevent="">{{ __('Connect Flow') }}</a>
						@endif
					</div>
				</div>
				@endforeach
			</div>
		</div>
	</div>
	<button class="koon-btn-dark mt-5 w-full">{{ __('Save') }}</button>
</form>


<div class="half-short fit-iframe-height p-0 mobile-modal" data-popup=".setup-flow" data-has-iframe-modal="">
	<div class="modal-handle"></div>
	<div class="sandy-dialog-body py-5"></div>
</div>
@endsection