{% load i18n %}
{% load static %}
{% load to_class_name %}

<logo>
<div class="ProfileLogo-avatar">
    <div class="ProfileAvatar" id="profile-avatar-logo">
        <img id="logo" src="{image_url}" {% if current_donor %} alt="{{ current_donor.name }}" {% endif %}/>
        {% if editor %}
        <div class="logo-wrapper">
            <button type="button" class="btn btn-small btn-ghost hidden-print" data-toggle="modal" data-target="#logo-image-modal">
                <img src={% static "img/banner-edit-button.svg" %}/> {% trans 'Change Logo' %}
            </button>
        </div>
        {% endif %}
    </div>
</div>

<!--   Banner image modal -->
<div class="modal fade" id="logo-image-modal" tabindex="-1" role="dialog" aria-labelledby="Logo-Image" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h3 class="modal-title" id="myModalLabel">{% trans 'Upload logo image' %}</h3>
            </div>
            <div class="modal-body">
                <form method="POST" id="form-logo_image" enctype="multipart/form-data" action="{% url 'upload' %}">
                    <input type="hidden" name="class" value="{{ organisation_profile|to_class_name }}">
                    <input type="hidden" name="pk" value="{{ organisation_profile.pk }}">
                    <input type="hidden" name="name" value="logo">

                    <p class="profileText">
                    {% trans 'The image you pick should be <strong>200x200 pixels.</strong> The image should be formatted as a <strong>JPEG</strong> or <strong>PNG</strong> file.' %}
                    </p>
                    <br />
                    <p id="profile-logo">
                    <img class="logo-image-preview" src="{% static 'img/logo_placeholder.jpg' %}" alt="" />
                    </p>
                    <div style="position: absolute; top: -9999px">
                        <input type="file" name="image" accept="image/*" class="hidden" onchange="{handle_file_upload}">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-large btn-default" data-dismiss="modal">{% trans 'Close' %}</button>
                <button type="button" class="btn btn-large btn-primary choose-image-display" data-dismiss="modal">{% trans 'Choose Image' %}</button>
            </div>
        </div>
    </div>
</div>

{% include 'tags/logo.js' %}

</logo>
