[% IF map.cols %]
<div class="noscript square-map__outer">
    <div class="square-map__inner">
        <div id="[% nsm_prefix %]drag" aria-hidden="true">
            [%- FOR row IN map.tiles -%]
                [%- FOR tile IN row -%]
                    [%- top_px = tile.row_offset * map.tile_size -%]
                    [%- left_px = tile.col_offset * map.tile_size %]
                    <[% map.img_type | safe %]
                        class="square-map__tile"
                        alt="[% tile.alt %]"
                        id="[% nsm_prefix %]t[% tile.dotted_id %]"
                        name="tile_[% tile.dotted_id %]"
                        src="[% tile.src %]"
                        style="width: [% 100 / map.cols %]%; height: auto; float: left;">
                [%- END -%]
            [% END %]
        </div>
        <div id="[% nsm_prefix %]pins" aria-hidden="true">[% FOR pin IN map.pins %][% INCLUDE pin %][% END %]</div>
        [% INCLUDE 'maps/_compass.html' %]
    </div>
</div>
[% ELSE %]
<div class="noscript">
    <div id="[% nsm_prefix %]drag" aria-hidden="true">
        <[% map.img_type | safe %]
            alt="NW map tile" id="[% nsm_prefix %]t2.2"
            name="tile_[% map.x_tile - 1 %].[% map.y_tile - 1 %]"
            src="[% map.tiles.0 %]"
            style="top:0; left:0;">
        <[% map.img_type | safe %]
            alt="NE map tile" id="[% nsm_prefix %]t2.3"
            name="tile_[% map.x_tile %].[% map.y_tile - 1 %]"
            src="[% map.tiles.1 %]"
            style="top:0px; left:256px;">
        <br>
        <[% map.img_type | safe %]
            alt="SW map tile" id="[% nsm_prefix %]t3.2"
            name="tile_[% map.x_tile - 1 %].[% map.y_tile %]"
            src="[% map.tiles.2 %]"
            style="top:256px; left:0;">
        <[% map.img_type | safe %]
            alt="SE map tile" id="[% nsm_prefix %]t3.3"
            name="tile_[% map.x_tile %].[% map.y_tile %]"
            src="[% map.tiles.3 %]"
            style="top:256px; left:256px;">
    </div>
    <div id="[% nsm_prefix %]pins" aria-hidden="true">[% FOR pin IN map.pins %][% INCLUDE 'maps/pin.html' %][% END %]</div>
    [% INCLUDE 'maps/_compass.html' %]
</div>
[% END %]

[% BLOCK pin %]
[%
    SET pin_top = pin.py / ( map.tile_size * map.rows ) * 100;
    SET pin_left = pin.px / ( map.tile_size * map.cols ) * 100;
    # -24px half of 48px wide image, -64px all of 64px tall image
    INCLUDE 'maps/pin.html'
        pin_style = 'top:' _ pin_top _ '%; left:' _ pin_left _ '%; position:absolute; margin-left:-24px; margin-top:-64px;'
%]
[% END %]