<% if channel.banner %>
    <div class="h-box">
        <img style="width:100%" src="/ggpht<%= URI.parse(channel.banner.not_nil!.gsub("=w1060-", "=w1280-")).request_target %>" alt="" />
    </div>

    <div class="h-box">
        <hr>
    </div>
<% end %>

<div class="pure-g h-box flexible title">
    <div class="pure-u-1-2 flex-left flexible">
        <div class="channel-profile">
            <img src="/ggpht<%= channel_profile_pic %>" alt="" />
            <div class="channel-name-pronouns">
                <span class="channel-name"><%= author %></span><% if !channel.verified.nil? && channel.verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %>
                <% if !channel.pronouns.nil? %><br /><span class="channel-pronouns"><%= channel.pronouns %></span><% end %>
            </div>
        </div>
    </div>

    <div class="pure-u-1-2 flex-right flexible button-container">
        <div class="pure-u">
            <% sub_count_text = number_to_short_text(channel.sub_count) %>
            <%= rendered "components/subscribe_widget" %>
        </div>

        <div class="pure-u">
            <a class="pure-button pure-button-secondary" dir="auto" href="/feed/channel/<%= ucid %>">
                <i class="icon ion-logo-rss"></i>&nbsp;<%= I18n.translate(locale, "generic_button_rss") %>
            </a>
        </div>
    </div>
</div>

<div class="h-box">
    <div id="descriptionWrapper"><p><span style="white-space:pre-wrap"><%= channel.description_html %></span></p></div>
</div>

<div class="pure-g h-box">
    <div class="pure-u-1-2">
        <div class="pure-u-1 pure-md-1-3">
            <a href="<%= youtube_url %>"><%= I18n.translate(locale, "View channel on YouTube") %></a>
        </div>
        <div class="pure-u-1 pure-md-1-3">
            <a href="<%= redirect_url %>"><%= I18n.translate(locale, "Switch Invidious Instance") %></a>
        </div>

        <%= Invidious::Frontend::ChannelPage.generate_tabs_links(locale, channel, selected_tab) %>
    </div>
    <div class="pure-u-1-2">
        <div class="pure-g" style="text-align:end">
            <% sort_options.each do |sort| %>
                <div class="pure-u-1 pure-md-1-3">
                    <% if sort_by == sort %>
                        <b><%= I18n.translate(locale, sort) %></b>
                    <% else %>
                        <a href="<%= relative_url %>?sort_by=<%= sort %>"><%= I18n.translate(locale, sort) %></a>
                    <% end %>
                </div>
            <% end %>
        </div>
    </div>
</div>
