{% load i18n %}

<div class="imagemodal_block">
    <h2>{{display_name}}</h2>
    <div class="wrapper">
        <a href="{{image_url}}">
            <img
                alt="{{alt_text}}"
                src="{{thumbnail_url}}"
                aria-describedby="xblock_imagemodal__description__{{xblock_id}}"
            />
        </a>
        <button class="fullscreen">
            <i class="icon-fullscreen icon-large"></i>
            <span>{% trans "Fullscreen" %}</span>
        </button>
    </div>
    <div class="curtain">
        <div class="mask">
            <div class="wrapper">
                <img alt="{{alt_text}}" src="{{image_url}}" />
            </div>
            <button class="zoom">
                <i class="icon-zoom-in icon-large"></i>
                <span>{% trans "Zoom In" %}</span>
            </button>
            <button class="close">
                <i class="icon-remove icon-large"></i>
                <span>{% trans "Close" %}</span>
            </button>
        </div>
    </div>
    <p id="xblock_imagemodal__description__{{xblock_id}}" class="sr">{{description}}</p>
</div>