{% if chapter.visible %}
    <tr id="chapter-{{ chapter.id }}" class="border-t hover:bg-green-100">
        {% if chapter.cbzPath is not null %}
            <td class="px-4 py-2 text-green-500">
                <a data-turbo-frame="_top"
                   href="{{ path('app_reader', { mangaSlug: manga.slug, chapterNumber: chapter.number, pageNumber: 1 }) }}">
                    {{ chapter.number < 10 ? '0' ~ chapter.number : chapter.number }}
                </a>
            </td>
        {% else %}
            <td class="px-4 py-2">{{ chapter.number < 10 ? '0' ~ chapter.number : chapter.number }}</td>
        {% endif %}

        <td class="px-4 py-2 w-full text-left">
            {% if chapter.cbzPath is not null %}
                <a data-turbo-frame="_top"
                   href="{{ path('app_reader', { mangaSlug: manga.slug, chapterNumber: chapter.number, pageNumber: 1 }) }}">
                    {{ chapter.title ?? 'No title' }}
                </a>
            {% else %}
                {{ chapter.title ?? 'No title' }}
            {% endif %}
        </td>
        <td class="px-4 py-2 flex justify-end gap-2">
            {% if chapter.cbzPath is null %}
                <button
                    data-controller="download"
                    data-action="download#download"
                    data-download-url-value="{{ path('search_chapter', {id: chapter.id}) }}"
                >
                <span class="text-gray-500 hover:text-green-500">
                    <i data-download-target="icon" class="fas fa-search"></i>
                </span>
                </button>
            {% else %}
                <button
                    data-controller="download"
                    data-action="download#download"
                    data-download-url-value="{{ path('app_delete_cbz', {id: chapter.id}) }}"
                >
                <span class="text-gray-500 hover:text-green-500">
                    <i data-download-target="icon" class="fas fa-times"></i>
                </span>
                </button>
            {% endif %}
            <a href="#"
               data-controller="download"
               data-action="download#download"
               data-download-url-value="{{ path('download_cbz', {chapterId: chapter.id}) }}"
               class="w-8 text-center">
                <i data-download-target="icon"
                   class="fas fa-download text-gray-500 hover:text-green-500"></i>
            </a>
            <button
                data-controller="download"
                data-action="download#download"
                data-download-url-value="{{ path('app_hide_chapter', {id: chapter.id}) }}"
            >
                <span class="text-gray-500 hover:text-green-500">
                    <i data-download-target="icon" class="fas fa-trash-can"></i>
                </span>
            </button>
        </td>
    </tr>
{% endif %}