{% extends 'settings/profile.html.twig' %}

{% block title %}Avatar Settings{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('assets/css/cropperjs/cropper.css') }}" rel="stylesheet">
    <script src="{{ asset('assets/javascript/cropperjs/cropper.js') }}"></script>
{% endblock %}

{% block form %}
    <div class='form'>
        <h1>Settings / Profile</h1>
        {{ form(avatar) }}
        <div id="img-container">
            <img id="img-cropped">
        </div>
    </div>
{% endblock form %}

{% block javascripts %}
    <script type="text/javascript" src="{{ asset('assets/javascript/cropping.js') }}"></script>
{% endblock javascripts %}