{% extends "singlelayout-narrow.html" %} {% block content %}
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="{{url_for('static', filename='choose_avatar.js')}}"></script>
<link rel="stylesheet" href="{{url_for('static', filename='cropper.css')}}" rel="stylesheet">
<script src="{{url_for('static', filename='cropper.js')}}"></script>
<link rel="stylesheet" href="{{url_for('static', filename='crop.css')}}" rel="stylesheet">
<script src="{{url_for('static', filename='crop.js')}}"></script>

<!-- Crop Modal -->
<div class="modal fade bd-example-modal-lg" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" style="display:inline-block;">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLabel" style="color: black;">Crop profile picture</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="img-container">
                    <img id="image" src="{{ url_for('static', filename='profile_pics/' + current_user.image_file) }}">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="crop">Crop</button>
            </div>
        </div>
    </div>
</div>
<!-- Crop Modal End -->

<div class="content-section" style="padding: 30px 40px;">
    <div class="d-flex align-items-center" style="margin-bottom: 25px;">
        <p class="avatar-font" style="margin: 0;">Select an avatar</p>
        <label class="button-add ml-auto" style="height: unset; cursor: pointer;">
            <input type="file" class="sr-only" id="input" name="image" accept="image/*">
            Upload Photo
        </label>
    </div>

    <div class="avatars">
        {% for avatar in avatar_list %}

        <a class="hovicon effect-1 sub-b" data-name="{{avatar}}">
            <img style="border-radius: 50%;" width="80" height="80"
                src="{{ url_for('static', filename='Animojis/' + avatar) }}">
        </a>

        {% endfor %}
    </div>

</div>

{% endblock content %}