<!-- o = App\Models\Service\Host::class -->
<div class="row">
	<!-- DOMAIN NAME -->
	<div class="col-6">
		<div class="form-group has-validation">
			<label for="domain_name">Domain Name</label>
			<div class="input-group">
				<div class="input-group-prepend">
					<span class="input-group-text"><i class="fas fa-fw fa-globe-asia"></i></span>
				</div>
				<input type="text" class="form-control col-9 text-right @error('host.domain_name') is-invalid @enderror" id="domain_name" name="host[domain_name]" placeholder="Domain Name..." value="{{ old('host.domain_name',$o->domain_name) }}" required>
				<div class="input-group-append">
					<span class="input-group-text">.</span>
				</div>
				<select class="form-control" id="domain_tld_id" name="host[domain_tld_id]">
					@foreach(\App\Models\DomainTld::active()->orderBy('name')->get() as $oo)
						<option value="{{ $oo->id }}" @if($oo->id == old('domain.domain_tld_id',$o->domain_tld_id))selected @endif>{{ $oo->name }}</option>
					@endforeach
				</select>

				<span class="invalid-feedback" role="alert">
					@error('host.domain_name')
					{{ $message }}
					@else
						Domain Name is required.
						@enderror
				</span>
			</div>
			<span class="input-helper">Domain Name</span>
		</div>
	</div>

	<!-- EXPIRY -->
	<div class="col-3">
		<div class="form-group has-validation">
			<label for="host_expire">Expiry</label>
			<div class="input-group">
				<div class="input-group-prepend">
					<span class="input-group-text"><i class="fas fa-fw fa-calendar"></i></span>
				</div>
				<input type="date" class="form-control @error('host.host_expire') is-invalid @enderror" id="host_expire" name="host[host_expire]" value="{{ old('host.host_expire',($o->host_expire ? $o->host_expire->format('Y-m-d') : NULL)) }}">
				<span class="invalid-feedback" role="alert">
					@error('host.host_expire')
						{{ $message }}
					@enderror
				</span>
			</div>
			<span class="input-helper">Hosting Expires</span>
		</div>
	</div>
</div>

<div class="row">
	{{--
	<!-- ADMIN URL -->
	<div class="col-9">
		<div class="form-group has-validation">
			<label for="admin_url">Hosting Admin URL</label>
			<div class="input-group">
				<div class="input-group-prepend">
					<span class="input-group-text"><i class="fab fa-fw fa-safari"></i></span>
				</div>
				<input type="text" class="form-control @error('host.admin_url') is-invalid @enderror" id="admin_url" name="host[admin_url]" placeholder="Admin URL..." value="{{ old('host.admin_url',$o->admin_url) }}">
				<span class="invalid-feedback" role="alert">
					@error('host.admin_url')
					{{ $message }}
					@enderror
				</span>
			</div>
			<span class="input-helper">Admin URL</span>
		</div>
	</div>
	--}}
</div>

<div class="row">
	<!-- ADMIN USER -->
	<div class="col-6">
		<div class="form-group has-validation">
			<label for="host_username">Admin User</label>
			<div class="input-group flex-nowrap">
				<div class="input-group-prepend">
					<span class="input-group-text"><i class="fas fa-fw fa-user"></i></span>
				</div>
				<input type="text" class="form-control @error('host.host_username') is-invalid @enderror" id="host_username" name="host[host_username]" placeholder="Admin USER" value="{{ old('host.host_username',$o->host_username) }}">
				<span class="invalid-feedback" role="alert">
					@error('host.host_username')
						{{ $message }}
					@enderror
				</span>
			</div>
			<span class="input-helper">Admin USER</span>
		</div>
	</div>

	<!-- ADMIN PASS -->
	<div class="col-6">
		<div class="form-group has-validation">
			<label for="host_password">Admin Pass</label>
			<div class="input-group">
				<div class="input-group-prepend">
					<span class="input-group-text"><i class="fas fa-fw fa-lock"></i></span>
				</div>
				<input type="text" class="form-control @error('host.host_password') is-invalid @enderror" id="host_password" name="host[host_password]" value="{{ old('host.host_password',$o->host_password) }}">
				<span class="invalid-feedback" role="alert">
					@error('host.host_password')
						{{ $message }}
					@enderror
				</span>
			</div>
			<span class="input-helper">Admin PASSWORD</span>
		</div>
	</div>
</div>

@section('page-scripts')
	@css(select2)
	@js(select2,autofocus)

	<style>
		.select2-selection.select2-selection--single {
			height: calc(2.25rem + 2px) !important;
		}
		.select2.select2-container.select2-container--default {
			display: flex;
			flex: 1 1 auto;
		}
		.select2.select2-container.select2-container--default .selection {
			width: 100%;
		}
	</style>

	<script type="text/javascript">
		$(document).ready(function() {
			// @todo This is taking up too much width
			//$('#domain_tld_id').select2();
		});
	</script>
@append