{{-- Image Data --}}
<div class="col-md-5 d-flex">
    <div class="card character-bio w-100">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item">
                    <a class="nav-link active" id="infoTab-{{ $image->id }}" data-toggle="tab" href="#info-{{ $image->id }}" role="tab">Info</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="notesTab-{{ $image->id }}" data-toggle="tab" href="#notes-{{ $image->id }}" role="tab">Notes</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="creditsTab-{{ $image->id }}" data-toggle="tab" href="#credits-{{ $image->id }}" role="tab">Credits</a>
                </li>
                @if (isset($showMention) && $showMention)
                    <li class="nav-item">
                        <a class="nav-link" id="mentionTab-{{ $image->id }}" data-toggle="tab" href="#mention-{{ $image->id }}" role="tab">Mention</a>
                    </li>
                @endif
                @if (Auth::check() && Auth::user()->hasPower('manage_characters'))
                    <li class="nav-item">
                        <a class="nav-link" id="settingsTab-{{ $image->id }}" data-toggle="tab" href="#settings-{{ $image->id }}" role="tab"><i class="fas fa-cog"></i></a>
                    </li>
                @endif
            </ul>
        </div>
        <div class="card-body tab-content">
            <div class="text-right mb-1">
                <div class="badge badge-primary">Image #{{ $image->id }}</div>
            </div>
            @if (!$image->character->is_myo_slot && !$image->is_valid)
                <div class="alert alert-danger">
                    This version of this character is outdated, and only noted here for recordkeeping purposes. Do not use as an official reference.
                </div>
            @endif

            {{-- Basic info --}}
            <div class="tab-pane fade show active" id="info-{{ $image->id }}">
                <div class="row no-gutters">
                    <div class="col-lg-4 col-5">
                        <h5>Species</h5>
                    </div>
                    <div class="col-lg-8 col-7 pl-1">{!! $image->species_id ? $image->species->displayName : 'None' !!}</div>
                </div>
                @if ($image->subtype_id)
                    <div class="row no-gutters">
                        <div class="col-lg-4 col-5">
                            <h5>Subtype</h5>
                        </div>
                        <div class="col-lg-8 col-7 pl-1">{!! $image->subtype_id ? $image->subtype->displayName : 'None' !!}</div>
                    </div>
                @endif
                @if ($image->transformation_id)
                    <div class="row no-gutters">
                        <div class="col-lg-4 col-md-6 col-4">
                            <h5>{{ ucfirst(__('transformations.form')) }} {!! add_help('The main image is always the active image') !!}</h5>
                        </div>
                        <div class="col-lg-8 col-md-6 col-8">
                            <a href="{{ $image->transformation->url }}">
                                {!! $image->transformation->displayName !!}
                            </a>
                            @if ($image->transformation_description)
                                ({{ $image->transformation_description }})
                            @endif
                        </div>
                    </div>
                @endif
                @if ($image->character->homeSetting)
                    <div class="row no-gutters">
                        <div class="col-lg-4 col-md-6 col-4">
                            <h5>Home</h5>
                        </div>
                        <div class="col-lg-8 col-md-6 col-8">{!! $image->character->location ? $image->character->location : 'None' !!}</div>
                    </div>
                @endif
                @if ($image->character->factionSetting)
                    <div class="row no-gutters">
                        <div class="col-lg-4 col-md-6 col-4">
                            <h5>Faction</h5>
                        </div>
                        <div class="col-lg-8 col-md-6 col-8">{!! $image->character->faction ? $image->character->currentFaction : 'None' !!}{!! $character->factionRank ? ' (' . $character->factionRank->name . ')' : null !!}</div>
                    </div>
                @endif
                <div class="row no-gutters">
                    <div class="col-lg-4 col-md-6 col-4">
                        <h5>Rarity</h5>
                    </div>
                    <div class="col-lg-8 col-7 pl-1">{!! $image->rarity_id ? $image->rarity->displayName : 'None' !!}</div>
                </div>
                @if ($image->titles->count() > 0)
                    <div class="row no-gutters">
                        <div class="col-lg-4 col-md-6 col-4">
                            <h5>Titles</h5>
                        </div>
                        <div class="col-lg-8 col-md-6 col-8">
                            <div class="h5">
                                {!! $image->displayTitles !!}
                            </div>
                        </div>
                    </div>
                @endif
                @if ($image->theme)
                    <div class="row no-gutters">
                        <div class="col-lg-4 col-md-6 col-4">
                            <h5>{{ ucfirst(__('character_theme.theme')) }}</h5>
                        </div>
                        <div class="col-lg-8 col-md-6 col-8">{!! $image->theme !!}</div>
                    </div>
                @endif

                <div class="mb-3">
                    <div>
                        <h5>Traits</h5>
                    </div>
                    @if (config('lorekeeper.extensions.traits_by_category'))
                        <div>
                            @php
                                $traitgroup = $image
                                    ->features()
                                    ->get()
                                    ->groupBy('feature_category_id');
                            @endphp
                            @if ($image->features()->count())
                                @foreach ($traitgroup as $key => $group)
                                    <div class="mb-2">
                                        @if ($key)
                                            <strong>{!! $group->first()->feature->category->displayName !!}:</strong>
                                        @else
                                            <strong>Miscellaneous:</strong>
                                        @endif
                                        @foreach ($group as $feature)
                                            <div class="ml-md-2">{!! $feature->feature->displayName !!} @if ($feature->data)
                                                    ({{ $feature->data }})
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                @endforeach
                            @else
                                <div>No traits listed.</div>
                            @endif
                        </div>
                    @else
                        <div>