@props(['url', 'publicado' => false])

<button
    type="button"
    {{ $attributes->merge([
        'class' => 'mdl-visibility-toggle '.($publicado ? 'is-visible' : 'is-hidden'),
        'data-visibility-url' => $url,
        'data-publicado' => $publicado ? '1' : '0',
        'title' => $publicado ? 'Visible para estudiantes. Clic para ocultar.' : 'Oculto para estudiantes. Clic para mostrar.',
        'aria-label' => $publicado ? 'Ocultar' : 'Mostrar',
    ]) }}
>
    <svg class="icon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path d="M10 3.5a6.5 6.5 0 016.5 6.5c0 1.61-.59 3.09-1.56 4.23l-1.06-1.06A4.98 4.98 0 0015.5 10 5.5 5.5 0 0010 4.5 5.5 5.5 0 004.5 10c0 1.2.38 2.31 1.03 3.22l-1.06 1.06A6.48 6.48 0 013.5 10 6.5 6.5 0 0110 3.5z" />
        <path d="M10 7a3 3 0 100 6 3 3 0 000-6z" />
    </svg>
    <svg class="icon-eye-closed" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M3.28 2.22a.75.75 0 00-1.06 1.06l14.5 14.5a.75.75 0 101.06-1.06l-1.322-1.322A6.465 6.465 0 0016.5 10c0-1.61-.59-3.09-1.56-4.23l-1.06 1.06A4.98 4.98 0 0115.5 10a5.5 5.5 0 01-5.5 5.5c-1.2 0-2.31-.38-3.22-1.03l-1.322 1.322zM10 4.5A5.5 5.5 0 004.5 10c0 .69.13 1.35.36 1.96l1.08-1.08A3.98 3.98 0 017 10a3 3 0 013-3c.55 0 1.06.15 1.5.41l1.08-1.08A5.48 5.48 0 0010 4.5zm5.14 8.36l-1.08 1.08A3 3 0 0110 13a3 3 0 01-3-3c0-.55.15-1.06.41-1.5l-1.08-1.08A4.98 4.98 0 006.5 10 5.5 5.5 0 0010 14.5c1.2 0 2.31-.38 3.22-1.03l1.42-1.57z" clip-rule="evenodd" />
    </svg>
</button>