<%# locals: { context, title, links, max_number_links, tooltip } %>
<div class="links" data-context="<%= context.present? ? context: 'default' %>" data-max-number-links="<%= max_number_links %>">
  <div class="row">
    <div class="col-xs-12">
      <h3><%= title.present? ? title : _('Links') %>&nbsp;
        <small>(<%= _('Up to ') %>
          <span class="max-number-links">
            <%= max_number_links %>
          </span>)
        </small>&nbsp;
        <a href="#" aria-label="<%= _('Text') %>" data-toggle="tooltip" data-placement="right" title="<%= tooltip %>">
          <i class="fa fa-question-circle fa-reverse" aria-hidden="true"></i>
        </a>
      </h3>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <% links = [{ "link" => "", "text" => "" }] if links.length == 0 %>
      <% links.each_with_index do |l, i| %>
        <div class="link row">
          <div class="col-xs-5">
            <div class="form-group">
              <%= label_tag "link_link#{i}", _('URL'), class: "control-label" %>
              <%= text_field_tag 'link_link', l['link'], class: "form-control", id: "link_link#{i}", 'data-validation': 'url' %>
            </div>
          </div>
          <div class="col-xs-5">
            <div class="form-group">
              <%= label_tag "link_text#{i}", _('Link text'), class: "control-label" %>
              <%= text_field_tag 'link_text', l['text'], class: "form-control", id: "link_text#{i}", 'aria-required': true %>
            </div>
          </div>
          <div class="col-xs-2">
            <div class="form-group">
              <a href="#" class="delete" aria-label="<%= _('Remove this link') %>">
                <i class="fa fa-times-circle fa-reverse" aria-hidden="true"></i>
              </a> 
            </div>
          </div>
        </div>
      <% end %>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <a href="#" class="new"><%= _('+ Add an additional URL') %></a>
    </div>
  </div>
</div>