<div>
 <% if (!url) { %>
    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 0;">
        <svg style="height: 80px;width:80px;fill:#335fa0;" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#808080"><path d="M200-120q-33 0-56.5-23.5T120-200q0-33 23.5-56.5T200-280q33 0 56.5 23.5T280-200q0 33-23.5 56.5T200-120Zm540 0q-26 0-43.5-19T676-184q-11-97-52.5-181.5T516-516q-66-66-150.5-107.5T184-676q-26-3-45-20.5T120-740q0-26 18-42.5t43-14.5q123 11 230.5 62.5T601-601q82 82 133.5 189.5T797-181q2 25-14.5 43T740-120Zm-240 0q-25 0-43-17.5T434-180q-9-49-31.5-90.5T346-346q-34-34-75.5-56.5T180-434q-25-5-42.5-23T120-500q0-26 18-43t43-13q73 10 136.5 42.5T431-431q50 50 82.5 113.5T556-181q4 25-13 43t-43 18Z"/ style="<%- styleString %>"></svg>
        <div style="color: #aaa;mix-blend-mode: difference;text-align: center;">
            <h4 style="margin-top: 0.5rem; font-weight: bold;font-size: 20px;margin-bottom: 0.5rem; <%- styleString %>" inline-edit="text">Welcome!</h4>
            <p style="margin-top: 0.25rem; <%- styleString %>" inline-edit="text">Add an RSS URL to display your feed here.</p>
        </div>
    </div>
 <% } else if (!items) { %>
 <div class="d-flex flex-column align-items-center justify-content-center text-muted py-5">
 <span class="spinner-border" role="status" style="width: 3rem; height: 3rem;" inline-edit="text"></span>
 <p class="mt-2" inline-edit="text" style="<%- styleString %>">Loading...</p>
 </div>
 <% } else { %>
 <% items.forEach(function(item) { %>
 <div>
 <h5 class="mb-1" inline-edit="text" style="<%- styleString %>"><%= item.title %></h5>
 <p class="mb-1" inline-edit="text" style="<%- styleString %>"><%= item.link || '#' %></p>
 <p class="mb-1 text-muted" inline-edit="text" style="<%- styleString %>"><%= item.pubDate || 'No Date' %></p>
 </div>
 <% }); %>
 <% } %>
</div>