<div class="awesome-avatar-widget">
    <link rel="stylesheet" href="{{ STATIC_URL }}imgareaselect/css/imgareaselect-animated.css" type="text/css" />
    <script type="text/javascript" src="{{ STATIC_URL }}imgareaselect/scripts/jquery.imgareaselect.pack.js"></script>

    <link rel="stylesheet" href="{{ STATIC_URL }}awesome_avatar/awesome-avatar.css" type="text/css" />
    <script type="text/javascript" src="{{ STATIC_URL }}awesome_avatar/awesome-avatar.js"></script>

    <div style="display:none">
        <input id="{{ id }}-x1" type="hidden" name="{{ name }}-x1"/>
        <input id="{{ id }}-y1" type="hidden" name="{{ name }}-y1"/>
        <input id="{{ id }}-x2" type="hidden" name="{{ name }}-x2"/>
        <input id="{{ id }}-y2" type="hidden" name="{{ name }}-y2"/>
        <input id="{{ id }}-ratio" type="hidden" name="{{ name }}-ratio"/>
    </div>

    <table>
        <tr>
            <td>
                <div id="{{ id }}-preview" class="awesome-avatar-preview"
                        style="width:{{ config.width }}px;height:{{ config.height }}px">
                    <img src="{{ avatar_url }}">
                </div>
            </td>
            <td>
                <div id="{{ id }}-select-area" class="awesome-avatar-select-area"
                    style="width:{{ config.select_area_width }}px;height:{{ config.select_area_height }}px">
                    <img src="">
                </div>
                <input type="file" class="awesome-avatar-input" id="{{ id }}" name="{{ name }}" accept="image/jpeg,image/png,image/gif"/>
            </td>
        </tr>
    </table>
    <script>
        bind_on_change_input_file('#{{ id }}', {
            select_area_width: {{ config.select_area_width }},
            select_area_height: {{ config.select_area_height }},
            width: {{ config.width }},
            height: {{ config.height }}
        });
    </script>
</div>
