{{--
  Shared partial: Workflow Template form fields
  Variables:
    $prefix  — 'create' or 'edit' (used for unique element IDs)
    $wft     — WorkflowTemplate model instance or null
--}}
@php
    $name         = $wft->name ?? '';
    $description  = $wft->description ?? '';
    $isActive     = $wft->is_active ?? true;
    $steps        = $wft->steps ?? [];
@endphp

<div class="row g-3">
    <div class="col-12">
        <label class="form-label fw-semibold">{{ __('Template Name') }} <span class="text-danger">*</span></label>
        <input type="text" name="name" class="form-control" value="{{ $name }}" required
               placeholder="{{ __('e.g. Standard Document Review') }}">
    </div>
    <div class="col-12">
        <label class="form-label fw-semibold">{{ __('Description') }}</label>
        <textarea name="description" class="form-control" rows="2"
                  placeholder="{{ __('Briefly describe this workflow...') }}">{{ $description }}</textarea>
    </div>
    <div class="col-12">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" name="is_active" id="{{ $prefix }}WfActive" value="1"
                   {{ $isActive ? 'checked' : '' }}>
            <label class="form-check-label" for="{{ $prefix }}WfActive">{{ __('Template is active') }}</label>
        </div>
    </div>
</div>

{{-- Workflow Stages Visual Flow Builder --}}
<div class="mt-4">
    <div class="mb-3">
        <h6 class="mb-0 fw-semibold">{{ __('Approval Flow') }}</h6>
        <p class="text-muted small mb-0">{{ __('Add stages below to define who handles this document and in what order. Link document types from the Document Types tab.') }}</p>
    </div>

    {{-- Flow cards container --}}
    <div id="{{ $prefix }}StepsFlow" class="wf-steps-flow"></div>

    {{-- Empty state --}}
    <div id="{{ $prefix }}StepsEmpty" class="text-center py-4 text-muted border border-dashed rounded-3 mb-3">
        <i class="ri-git-branch-line fs-28 d-block mb-1 opacity-50"></i>
        <span class="small">{{ __('No stages yet — use the buttons below to build the flow.') }}</span>
    </div>

    {{-- Add stage buttons --}}
    <div class="d-flex flex-wrap gap-2 pt-1">
        <button type="button" class="btn btn-sm btn-soft-primary wf-add-btn"
                data-flow="{{ $prefix }}StepsFlow" data-step-type="organization">
            <i class="ri-building-line me-1"></i> {{ __('Add Next Organization') }}
        </button>
        <button type="button" class="btn btn-sm btn-soft-info wf-add-btn"
                data-flow="{{ $prefix }}StepsFlow" data-step-type="vice_rector">
            <i class="ri-user-star-line me-1"></i> {{ __('Add Vice Rector Stage') }}
        </button>
        <button type="button" class="btn btn-sm btn-soft-success wf-add-btn"
                data-flow="{{ $prefix }}StepsFlow" data-step-type="approval">
            <i class="ri-check-double-line me-1"></i> {{ __('Add Rector Stage') }}
        </button>
    </div>
    <p class="text-muted small mt-2 mb-0">
        <i class="ri-information-line me-1"></i>
        {{ __('Add stages in the order you want. Organization stages route to the selected organization; vice rector stages require a selected vice rector; rector stages use the active rector.') }}
    </p>
</div>