@php ($field_prefix = sprintf('photo[%d]', $photo->id))
<div class="photo row" data-photo-id="{{ $photo->id }}">
    <div class="col-sm-2">
        <div class="loading"><img src="{{ asset('ripple.svg') }}" /></div>

        <a href="{{ $photo->thumbnailUrl() }}" target="_blank">
            <img class="photo-thumbnail" src="{{ $photo->thumbnailUrl('admin-preview') }}" data-original-src="{{ $photo->thumbnailUrl('admin-preview') }}" style="max-width: 100%;"/>
        </a><br/>

        {{-- Photo editing tasks - these are hooked up using Javascript in admin/show_album --}}
        @php($canChangeMetadata = Auth::user()->can('change-metadata', $photo))
        @php($canManipulate = Auth::user()->can('manipulate', $photo))
        @php($canDelete = Auth::user()->can('delete', $photo))

        @if ($canManipulate || $canChangeMetadata || $canDelete)
            <div class="text-center mt-1">
                <div class="btn-group btn-group-sm" role="group">
                    @if ($canManipulate)
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-fw fa-pencil"></i> <span class="caret"></span>
                        </button>
                        <div class="dropdown-menu">
                            <a href="#" class="dropdown-item rotate-photo-left" v-on:click="rotateLeft"><i class="fa fa-fw fa-rotate-left"></i> @lang('admin.photo_actions.rotate_left')</a>
                            <a href="#" class="dropdown-item rotate-photo-right" v-on:click="rotateRight"><i class="fa fa-fw fa-rotate-right"></i> @lang('admin.photo_actions.rotate_right')</a>
                            <div class="dropdown-divider"></div>
                            <a href="#" class="dropdown-item flip-photo-horizontal" v-on:click="flipHorizontal"><i class="fa fa-fw fa-arrows-h"></i> @lang('admin.photo_actions.flip_horizontal')</a>
                            <a href="#" class="dropdown-item flip-photo-vertical" v-on:click="flipVertical"><i class="fa fa-fw fa-arrows-v"></i> @lang('admin.photo_actions.flip_vertical')</a>
                            <a href="#" class="dropdown-item flip-photo-both" v-on:click="flipBoth"><i class="fa fa-fw fa-retweet"></i> @lang('admin.photo_actions.flip_both')</a>
                            <div class="dropdown-divider"></div>
                            <a href="#" class="dropdown-item flip-photo-both" v-on:click="replacePhoto"><i class="fa fa-fw fa-recycle"></i> @lang('admin.photo_actions.replace_image')</a>
                        </div>
                    </div>
                    @endif
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-fw fa-cog"></i> <span class="caret"></span>
                        </button>
                        <div class="dropdown-menu">
                            @if ($canChangeMetadata)
                                <a href="#" class="dropdown-item change-album" v-on:click="changeAlbum"><i class="fa fa-fw fa-share"></i> @lang('admin.photo_actions.change_album')</a>
                                <a href="#" class="dropdown-item regenerate-thumbnails" v-on:click="regenerateThumbnails"><i class="fa fa-fw fa-picture-o"></i> @lang('admin.photo_actions.refresh_thumbnails')</a>
                            @endif
                            @if ($canDelete)
                                <a href="#" class="dropdown-item delete-photo" v-on:click="deletePhoto"><i class="fa fa-fw fa-trash text-danger"></i> <span class="text-danger">@lang('admin.photo_actions.delete')</span></a>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="mt-2">
                    <input type="checkbox" id="select-photo-{{ $photo->id }}" name="select-photo[]" value="{{ $photo->id }}" /> <label for="select-photo-{{ $photo->id }}">@lang('forms.select')</label>
                </div>
            </div>
        @endif
    </div>
    <div class="col-xs-12 col-sm-10">
        @php($validation_field_name = ('photo.' . $photo->id . '.name'))
        <div class="form-group{{ $errors->has($validation_field_name) ? ' has-error' : '' }}">
            <label class="control-label" name="{{ $field_prefix }}[name]">@lang('forms.name_label')</label>
            <input class="form-control" type="text" name="{{ $field_prefix }}[name]" value="{{ old($field_prefix . '[name]', $photo->name) }}" @cannot('change-metadata', $photo) disabled="disabled"@endcannot/>

            @if ($errors->has($validation_field_name))
                <span class="help-block">
                    <strong>{{ $errors->first($validation_field_name) }}</strong>
                </span>
            @endif
        </div>

        <div class="form-group">
            <label class="control-label" name="{{ $field_prefix }}[description]">@lang('forms.description_label')</label>
            <textarea name="{{ $field_prefix }}[description]" class="form-control" rows="4" @cannot('change-metadata', $photo) disabled="disabled"@endcannot>{{ old($field_prefix . '[description]', $photo->description) }}</textarea>
        </div>

        <div class="form-group">
            <label class="control-label" name="{{ $field_prefix }}[labels]">@lang('forms.labels_label')</label>
            <input class="labels-field" type="text" name="{{ $field_prefix }}[labels]" value="{{ old($field_prefix . '[labels]', $photo->labelIDs()) }}" @cannot('change-metadata', $photo) disabled="disabled"@endcannot/>
        </div>
    </div>
</div>
<hr/>