<div class="wrapper-u-field">
    <div class="u-field-header">
        <% if (mode === 'edit') { %>
            <label class="u-field-title" for="u-field-textarea-<%- id %>" id="u-field-title-<%- id %>"></label>
        <% } else { %>
            <span class="u-field-title" id="u-field-title-<%- id %>" aria-hidden="true"></span>
        <% } %>
        <% if (messagePosition === 'header') { %>
            <span class="u-field-message" id="u-field-message-<%- id %>">
                <span class="u-field-message-notification" aria-live="polite"></span>
                <span class="u-field-message-help" id="u-field-message-help-<%- id %>"> <%- message %></span>
            </span>
        <% }%>
    </div>

    <div class="u-field-value" id="u-field-value-<%- id %>"
        <% if (mode === 'edit') { %>
            aria-labelledby="u-field-title-<%- id %>"><textarea id="u-field-textarea-<%- id %>" rows="4"
            <% if (message) { %>
                aria-describedby="u-field-message-help-<%- id %>"
            <% } %>
            ><%- value %></textarea>
        <% } else if (editable === 'never') { %>
            ><p class="sr"><%- screenReaderTitle %></p><span class="u-field-value-readonly" aria-hidden="false"
            <% if (message) { %>
                aria-describedby="u-field-message-help-<%- id %>"
            <% } %>
            ><%- value %></span>
        <% } else { %>
            ><a href="#"><p class="sr"><%- screenReaderTitle %></p><span class="u-field-value-readonly" aria-hidden="false" aria-describedby="u-field-placeholder-value-<%- id %>"><%- value %></span><span class="sr"><%- gettext('Click to edit') %></span></a>
            <span class="sr" id="u-field-placeholder-value-<%- id %>"><%- placeholderValue %></span>
        <% } %>
    </div>

    <div class="u-field-footer">
        <% if (messagePosition === 'footer') { %>
            <span class="u-field-message" id="u-field-message-<%- id %>">
                <span class="u-field-message-notification" aria-live="polite"></span>
                <span class="u-field-message-help" id="u-field-message-help-<%- id %>"> <%- message %></span>
            </span>
        <% } %>
    </div>
</div>