<%
const { description: fs_description, hitokoto: fs_hitokoto } = theme?.first_screen || {}
let final_description = fs_description || ''
final_description = final_description.split('||').map(desc => desc.trim())
if (final_description.length > 2) { final_description.length = 2 }
const { enable: sc_enable, links: sc_links } = theme?.social_contact || {}
%>
<div class="first-screen-container border-box flex-center fade-in-down-animation">
    <div class="first-screen-content border-box">
        <div class="top-placeholder border-box"></div>

        <div class="middle-placeholder border-box">
            <% if (final_description.length || fs_hitokoto === true) { %>
                <div class="description border-box">
                    <% if (fs_hitokoto === true) { %>
                        <div class="desc-item border-box"><span class="desc hitokoto"></span><span class="cursor">｜</span></div>
                    <% } else { %>
                        <% for (const idx in final_description) { %>
                            <% if (final_description[idx]) { %>
                                <div class="desc-item border-box"><span class="desc"><%= final_description[idx] %></span><span class="cursor">｜</span></div>
                            <% } %>
                        <% } %>
                    <% } %>
                </div>
            <% } %>

            <% if (fs_hitokoto === true) { %>
                <script async <%= theme?.pjax?.enable === true ? 'data-pjax' : '' %>
                        src="https://v1.hitokoto.cn/?encode=js"
                >
                </script>
            <% } %>
        </div>

        <div class="bottom-placeholder border-box">
            <% if (sc_enable === true) { %>
                <div class="sc-icon-list border-box">
                    <!-- fontawesome icons -->
                    <% for (const key in sc_links) { %>
                        <% if(sc_links[key]) { %>
                            <%
                                const tmpl = sc_links[key].split('|').map(x => x.trim())
                                let isImg = false
                                let link = sc_links[key]
                                if (tmpl.length > 1) {
                                    link = tmpl[1]
                                    isImg = tmpl[0] === 'img'
                                }
                            %>
                            <div class="tooltip sc-icon-item <%= isImg ? 'tooltip-img clear' : ''%>"
                                 data-tooltip-content="<%= __(key) %>"
                                 <%= isImg ? 'data-tooltip-img-name='+ key +'' : '' %>
                                 <%= isImg ? 'data-tooltip-img-url='+ link +'' : '' %>
                            >
                                <% if(key === 'email') { %>
                                    <a href="mailto:<%- link %>">
                                        <i class="fas fa-envelope"></i>
                                    </a>
                                <% } else { %>
                                    <% const sc_icon = key === 'x' ? 'x-twitter' : key %>
                                    <% if(isImg) { %>
                                        <i class="fab fa-<%= sc_icon %>"></i>
                                    <% } else { %>
                                        <a target="_blank" href="<%- link %>">
                                            <i class="fab fa-<%= sc_icon %>"></i>
                                        </a>
                                    <% } %>
                                <% } %>
                            </div>
                        <% } %>
                    <% } %>

                    <!-- custom svg icons -->
                    <% const custom_icons = theme.source_data?.icons || {} %>
                    <% for (const icon in custom_icons) { %>
                        <% if(custom_icons[icon]) { %>
                            <%
                                const custom_tmpl = custom_icons[icon].link.split('|').map(x => x.trim())
                                let custom_is_img = false
                                let custom_link = custom_icons[icon].link
                                const custom_svg = custom_icons[icon].svg
                                if (custom_tmpl.length > 1) {
                                    custom_link = custom_tmpl[1]
                                    custom_is_img = custom_tmpl[0] === 'img'
                                }
                            %>
                            <div class="tooltip border-box sc-icon-item <%= icon %> <%= custom_is_img ? 'tooltip-img clear' : ''%>"
                                 data-tooltip-content="<%= __(icon) %>"
                                 <%= custom_is_img ? 'data-tooltip-img-name='+ icon +'' : '' %>
                                 <%= custom_is_img ? 'data-tooltip-img-url='+ custom_link +'' : '' %>
                            >
                                <% if(!custom_is_img) { %><a target="_blank" href="<%- custom_link %>"><% } %>
                                    <%- custom_svg %>
                                <% if(!custom_is_img) { %></a><% } %>
                            </div>
                        <% } %>
                    <% } %>
                </div>
            <% } %>
        </div>
    </div>
</div>
