{%- assign radio = site.posts | find: 'layout', 'radio' -%}

{% comment %}
  La posición sticky permite que la barra ocupe el alto adecuado en el
  sitio y se "despegue" cuando estamos escroleando hacia abajo.
  Funciona bien pero si escroleamos rápido se detecta el microsegundo
  donde el navegador tardó en decidir qué hacía con la barra y se ve una
  franja del fondo.

  Si usamos fixed tenemos que incorporar el alto de la barra como margen
  superior del sitio para que no se coma la parte de arriba.

  TODO: Incorporar el hack para que no se coma el destino de la
  navegación interna al saltar a un elemento (un título por ejemplo).

  Evitamos que turbolinks descargue este elemento, o sea que se mantenga
  entre navegaciones internas.  Necesita un ID para funcionar.
{% endcomment %}
<nav
  data-turbolinks-permanent
  id="navbar"
  class="navbar sticky-top navbar-expand-lg navbar-theme d-print-block row no-gutters justify-content-center pl-0 pr-0"
  role="navigation"
  aria-label="{{ site.i18n.menu.title }}">

  {% comment %}
    Para que la barra se alinee con el contenido, tenemos que darle el
    mismo ancho.
  {% endcomment %}
  <div class="col-10">
    <div class="row no-gutters align-items-center">
      {% comment %}
        La columna del logo tiene el mismo ancho que la imagen principal
        de un artículo.
      {% endcomment %}
      <a class="navbar-brand col col-md-3 flex-grow-0" href="">
        {% include_cached logo.html %}

        {% comment %}
          XXX: En pantallas pequeñas el nombre de la radio ocupa mucho espacio
        {% endcomment %}
        <span class="d-none d-md-inline">
          {{ radio.title }}
        </span>
      </a>

      {% comment %}
        El reproductor crece cuando la pantalla es chica y abarca todo el
        espacio disponible.

        Tiene el mismo ancho que el ancho de un artículo.
      {% endcomment %}
      <div class="col col-md-6 flex-grow-1 d-flex align-items-center">
        {% include_cached reproductor.html %}
      </div>

      {% comment %}
        La lista de botones de redes sociales no se muestra en celulares.

        Los botones ocupan el espacio sobrante, a la derecha de la imagen.
      {% endcomment %}
      <ul class="navbar-nav d-print-none col d-none d-lg-flex">
        {%- for social in site.i18n.menu.items -%}
          {%- unless radio[social.type] -%}{% continue %}{%- endunless -%}
          <li class="nav-item">
            <a
              rel="me"
              class="nav-link social-theme"
              target="_blank" href="{{ radio[social.type] }}">
              <i class="fa fa-fw fa-x2 fa-{{ social.icon }}"></i>
              <span class="sr-only">{{ social.text }}</span>
            </a>
          </li>
        {%- endfor -%}
      </ul>
    </div>
  </div>
</nav>