@if(isset($view) && ($view === 'browse' || $view === 'read'))
    {{-- Browse / Read Table View: Photo Only --}}
    @php
        $img = $content ?? ($dataTypeContent->{$row->field} ?? null);
    @endphp
    @if(!empty($img))
        <img src="@if(!filter_var($img, FILTER_VALIDATE_URL)){{ Voyager::image($img) }}@else{{ $img }}@endif" 
             style="width: 55px; height: 68px; object-fit: cover; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.12);" 
             alt="{{ $dataTypeContent->name ?? '' }}">
    @else
        <span class="text-muted" style="font-size: 11px;">No photo</span>
    @endif
@else
    {{-- Edit / Add View: Image Preview, File Input & Photo Resolution Guidelines --}}
    @if(isset($dataTypeContent->{$row->field}))
        <div data-field-name="{{ $row->field }}">
            <a href="#" class="voyager-x remove-single-image" style="position:absolute;"></a>
            <img src="@if( !filter_var($dataTypeContent->{$row->field}, FILTER_VALIDATE_URL)){{ Voyager::image( $dataTypeContent->{$row->field} ) }}@else{{ $dataTypeContent->{$row->field} }}@endif"
              data-file-name="{{ $dataTypeContent->{$row->field} }}" data-id="{{ $dataTypeContent->getKey() }}"
              style="max-width:180px; height:auto; clear:both; display:block; padding:3px; border:1px solid #cbd5e1; border-radius:6px; margin-bottom:12px; box-shadow: 0 2px 6px rgba(0,0,0,0.08);">
        </div>
    @endif

    <input @if($row->required == 1 && !isset($dataTypeContent->{$row->field})) required @endif type="file" name="{{ $row->field }}" accept="image/*" class="form-control" style="padding-top: 5px;">

    <div style="margin-top: 10px; padding: 12px 16px; background-color: #f0fdf4; border: 1px solid #bbf7d0; border-left: 4px solid #10b981; border-radius: 6px; color: #166534; font-size: 13px; line-height: 1.55;">
        <div style="font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; color: #15803d; font-size: 13.5px;">
            <i class="voyager-info-circled" style="font-size: 16px; color: #10b981;"></i>
            <span>Required Member Photo Guidelines:</span>
        </div>
        <ul style="margin: 0 0 0 20px; padding: 0;">
            <li style="margin-bottom: 3px;"><strong>Recommended Resolution:</strong> <code style="background: #dcfce7; color: #15803d; padding: 2px 6px; border-radius: 4px; font-weight: 600;">600 &times; 750 px</code> (Portrait <strong>4:5</strong> aspect ratio)</li>
            <li style="margin-bottom: 3px;"><strong>Minimum Resolution:</strong> <code>400 &times; 500 px</code></li>
            <li style="margin-bottom: 3px;"><strong>Accepted Formats:</strong> JPG, PNG, WEBP (Max file size: <code>2 MB</code>)</li>
            <li><strong>Display Tip:</strong> For best appearance on website cards, use a centered portrait headshot with clear lighting so the subject is properly centered in the card frame without cropping.</li>
        </ul>
    </div>
@endif