{{--Avatar--}}
<div class="form-group row">
    {{--Camera--}}
    <div class="col-6 col-md-3">
        <input type="hidden" id="avatar_picture" name="avatar_picture" value="{{ old('avatar_picture') }}"/>
        <div id="open_camera_btn" class="btn btn-primary btn-block btn-lg">
            <i class="fa fa-camera"></i>
            Take Photo
        </div>
    </div>
    {{--Upload Picture--}}
    {{--<div class="col-6 col-md-3">--}}
    {{--<input type="file" id="avatar_file" name="avatar_file" accept="image/*" value="{{ old('avatar_file') }}" hidden>--}}
    {{--<div id="open_folder_btn" class="btn btn-primary btn-block btn-lg">--}}
    {{--Upload Picture--}}
    {{--</div>--}}
    {{--</div>--}}
</div>
<div class="form-group row">
    <div class="col-md-5 col-lg-5">
        <div id="webcam_result" class="img-box d-flex justify-content-center align-items-center"
             style="width: 300px; overflow: hidden;">
            @if(!empty(old('avatar_picture')))
                <div class="new-avatar-preview" style="background-image: url({{old('avatar_picture')}})"></div>
            @elseif(!empty($family->avatar_path))
                <img class="img-thumbnail" width="300" src="{{ $family->avatar_path }}"/>
            @endif
        </div>
    </div>
</div>

@include('components.camera_modal')

<script src="{{ mix('/js/webcam.js') }}" defer></script>