@extends('backend.layout.master-tailwind')
@section('title', __('Skill Settings'))

@section('admin_styles')
<style>
.field-label {
    display: block;
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 6px;
    font-weight: 500;
}
</style>
@endsection

@section('content')

<div class="page">

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Skill Settings') }}</h1>
      <p class="page-sub">{{ __('Labels and titles for the skill step of account setup') }}</p>
    </div>
  </div>

  <div style="max-width:560px">
    <div class="card" style="padding:24px">

      @if($errors->any())
      <div style="background:color-mix(in oklch,var(--danger,#ef4444) 8%,transparent);border:1px solid color-mix(in oklch,var(--danger,#ef4444) 30%,transparent);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--danger,#ef4444);display:flex;flex-direction:column;gap:4px;margin-bottom:18px">
        @foreach($errors->all() as $error)
        <div>{{ $error }}</div>
        @endforeach
      </div>
      @endif

      <form action="{{ route('admin.page.account.skill') }}" method="POST" style="display:flex;flex-direction:column;gap:16px">
        @csrf

        <div>
          <label class="field-label" for="skill_menu_title">{{ __('Menu Title') }}</label>
          <input class="input wide" type="text" id="skill_menu_title" name="skill_menu_title"
            value="{{ get_static_option('skill_menu_title') ?? '' }}"
            placeholder="{{ __('Enter Menu title') }}">
        </div>

        <div>
          <label class="field-label" for="skill_menu_sub_title">{{ __('Menu Subtitle') }}</label>
          <input class="input wide" type="text" id="skill_menu_sub_title" name="skill_menu_sub_title"
            value="{{ get_static_option('skill_menu_sub_title') ?? '' }}"
            placeholder="{{ __('Enter Menu subtitle') }}">
        </div>

        <div>
          <label class="field-label" for="skill_title">{{ __('Skill Title') }}</label>
          <input class="input wide" type="text" id="skill_title" name="skill_title"
            value="{{ get_static_option('skill_title') ?? '' }}"
            placeholder="{{ __('Enter skill title') }}">
        </div>

        @can('skill-page-settings-update')
        <div>
          <button type="submit" class="btn primary sm">{{ __('Update') }}</button>
        </div>
        @endcan

      </form>

    </div>
  </div>

</div>

@endsection