@extends('admin.layouts.components.subcomponents.card', ['title' => 'Feature'])
@section('body')

@php
    $base = "components[$itemID][subcomponents][$i][values]";
    $oldKey = "components.$itemID.subcomponents.$i.values";
    $feature = $sub->subcomponents[$i] ?? null;
@endphp

<div class="form-row">
    <div class="col-md-4 col-12">
        <div class="form-group">
            <label>Icon</label>
            @include('admin.partials.inputs.imgInput', [
                'i'       => $i,
                'uid'     => 'icon-feature-'.$itemID.'-'.$i,
                'name'    => $base.'[icon]',
                'value'   => old("$oldKey.icon", $feature->icon ?? ''),
                'thumb'   => old("$oldKey.icon", $feature->icon ?? '/images/image-placeholder.png') ?: '/images/image-placeholder.png',
                'classes' => 'mb-3'
            ])
            <small>A simple line icon (SVG or transparent PNG). It is shown 90px tall.</small>
        </div>
    </div>

    <div class="col-md-8 col-12">
        <div class="form-group">
            <label for="{{ "icon-feature-$itemID-$i-title" }}">Title</label>
            <input id="{{ "icon-feature-$itemID-$i-title" }}" class="form-control w-100" type="text"
                   name="{{ $base }}[title]" value="{{ old("$oldKey.title", $feature->title ?? '') }}"
                   placeholder="e.g. Award-Winning Creativity">
        </div>

        <div class="form-group">
            <label for="{{ "icon-feature-$itemID-$i-text" }}">Text</label>
            <textarea id="{{ "icon-feature-$itemID-$i-text" }}" class="form-control w-100" rows="4"
                      name="{{ $base }}[text]">{{ old("$oldKey.text", $feature->text ?? '') }}</textarea>
        </div>
    </div>
</div>

<input type="hidden" name="components[{{ $itemID }}][subcomponents][{{ $i }}][type]" value="ComponentIconFeaturesItem">
@overwrite