{%- comment -%}
  Modal para loguearse al fediverso

  @param :action [String] acción que le usuarie quiere realizar desde el fediverso
  @param :fa [String] nombre del ícono que usa fork-awesome
  @param :uri [String] la URL sobre la que se interactúa
  @param :profile [ActivityDrop] Actor
{%- endcomment -%}

{% assign action = include.action %}
{% assign fa = include.fa %}
{% capture name %}
  {% include_cached activity_pub/actor.html actor=include.profile %}
{% endcapture %}

{% capture header %}

  <div class="d-flex align-items-center h1 justify-content-center w-100">
      <span class="d-flex responsive-header font-weight-bold text-center">
          <i class="fa fa-{{fa}} text-primary mr-2"></i>
          <span class="break-wrap">{{ site.i18n.login_modal[action.title].text | replace: "$usuarie", name }}</span>
          <div>
              <span class="px-3 py-2 m-0 h1" type="button" data-action="click->modal#hide">&times</span>
              <span class="sr-only">{{ site.i18n.close }}</span>
          </div>
      </span>
  </div>
{% endcapture %}

{% capture body %}
  <p class="mb-2">{{site.i18n.login_modal.top_text | markdownify | replace: "$action", site.i18n.login_modal[action.title].title }}</p>
  <div class="mt-3 mb-2 h5">{{site.i18n.login_modal.question | markdownify}}</div>
  <div class="mb-3">
    <form
      class="needs-validation"
      data-controller="authorize-interaction"
      data-action="authorize-interaction#submit:prevent"
      data-authorize-interaction-uri-value="{{ include.uri | strip_html | absolute_url | uri_escape }}"
      >
      <div class="form-row align-items-center border-lg border-lg-primary py-1">
        <div class="col-12 col-lg mb-1 mb-lg-0">
          <label class="sr-only">{{site.i18n.login_modal.placeholder}}</label>
          <input
            class="form-control border border-primary border-lg-0"
            placeholder="{{site.i18n.login_modal.placeholder}}"
            autocomplete="impp"
            required
            data-authorize-interaction-target="instance"
            data-action="authorize-interaction#revalid"
            type="search">
          <div class="invalid-feedback">
            {{- site.i18n.login_modal.authorize_interaction_unsupported -}}
          </div>
        </div>

        <div class="col-12 col-lg-auto">
          <button class="btn btn-primary btn-block py-btn-padding-y lh-btn-line-height f-16 font-weight-bold" type="submit">{{ site.i18n.take_me_home }}</button>
        </div>
      </div>
    </form>
  </div>
<small class="d-block mb-2">{{site.i18n.login_modal.small_text}}</small>
<span>{{site.i18n.login_modal.bottom_text | markdownify}}</span>
{% endcapture %}

{% capture footer %}
{% endcapture %}

{% include activity_pub/button.html header=header body=body footer=footer header_class="justify-content-center border-bottom-0" body_class="justify-content-center" footer_class="border-top-0" content_class="p-2" button_class="mx-1" fa=action.icon description=include.description %}