<% if !chapters.empty? %>
    <div class="description-chapters-section">
        <hr class="description-content-separator"/>
        <h4><%=HTML.escape(translate(locale, "video_chapters_label"))%></h4>

        <% if video.automatically_generated_chapters? %> 
          <h5><%=HTML.escape(translate(locale, "video_chapters_auto_generated_label"))%> </h5>
        <% end %>

        <div class="description-chapters-content-container">
            <% chapters.each do | chapter | %>
                <%- start_in_seconds = chapter.start_ms.milliseconds.total_seconds.to_i %>
                <a href="/watch?v=<%-= video.id %>&t=<%=start_in_seconds %>">
                    <div class="chapter" data-onclick="jump_to_time" data-jump-time="<%=start_in_seconds%>">
                        <div class="thumbnail">
                            <%- if !env.get("preferences").as(Preferences).thin_mode -%>
                                <img loading="lazy" class="thumbnail" src="<%-=URI.parse(chapter.thumbnails[-1]["url"].to_s).request_target %>" alt="" data-onclick="jump_to_time" data-jump-time="<%=start_in_seconds%>"/>
                            <%- else -%>
                                <div class="thumbnail-placeholder" data-onclick="jump_to_time" data-jump-time="<%=start_in_seconds%>"></div>
                            <%- end -%>
                        </div>
                        <%- if start_in_seconds > 0 -%>
                            <p data-onclick="jump_to_time" data-jump-time="<%=start_in_seconds%>"><%-= recode_length_seconds(start_in_seconds) -%></p>
                        <%- else -%>
                            <p data-onclick="jump_to_time" data-jump-time="<%=start_in_seconds%>">0:00</p>
                        <%- end -%>
                        <p data-onclick="jump_to_time" data-jump-time="<%=start_in_seconds%>"><%-=chapter.title-%></p>
                    </div>
                </a>
            <% end %>
        </div>
        <hr class="description-content-separator"/>
    </div>
<% end %>