{% comment %}
Shared empty state shown when no social accounts are connected in the workspace.
Expects: workspace (with workspace.id).
{% endcomment %}
<div class="text-center py-16 px-6">
    <div class="mx-auto mb-6 w-[335px] max-w-full">
        <svg width="335" height="300" viewBox="0 0 335 300" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M73.8007 181.534V157.192C73.8007 156.916 73.5766 156.693 73.3007 156.692C73.0245 156.692 72.8007 156.916 72.8007 157.192V181.534C72.8007 237.106 123.429 282.06 185.756 282.06C248.061 282.059 298.711 243.172 298.711 181.534V69.4737L317.996 86.7377C318.201 86.9216 318.517 86.9041 318.701 86.6986C318.885 86.4929 318.867 86.1768 318.662 85.9926L298.486 67.932C298.296 67.762 298.009 67.7618 297.819 67.932L277.702 85.9936C277.496 86.1781 277.479 86.4942 277.664 86.6996C277.848 86.9048 278.164 86.9219 278.37 86.7377L297.711 69.3727V181.534C297.711 242.475 247.665 281.059 185.756 281.06C123.868 281.06 73.8007 236.447 73.8007 181.534Z" fill="var(--color-illustration-border)"/><g filter="url(#filter0_d_693_25978)"><rect x="1" y="84" width="240" height="93" rx="5" fill="var(--color-illustration-card)"/><rect x="1.5" y="84.5" width="239" height="92" rx="4.5" stroke="var(--color-illustration-border)"/><rect x="14" y="102" width="107" height="5" rx="1.5" fill="var(--color-illustration-element)"/><rect x="14" y="116" width="125" height="5" rx="1.5" fill="var(--color-illustration-element)"/><rect x="14" y="131" width="125" height="5" rx="1.5" fill="var(--color-illustration-element)"/><rect x="159" y="93" width="73" height="73" rx="5" fill="var(--color-illustration-secondary-element)"/><path d="M27.131 166.622C27.5554 166.622 27.9625 166.453 28.2627 166.153L32.3207 162.095C32.6209 161.795 32.7895 161.388 32.7895 160.964C32.7895 160.539 32.6209 160.132 32.3207 159.832L28.2627 155.774C27.9625 155.474 27.5554 155.305 27.131 155.305H17.2812C16.7684 155.307 16.2772 155.511 15.9146 155.874C15.5521 156.237 15.3477 156.728 15.346 157.241L15.346 164.687C15.3477 165.199 15.5521 165.691 15.9146 166.053C16.2772 166.416 16.7684 166.62 17.2812 166.622L27.131 166.622Z" fill="var(--color-illustration-accent)" fill-opacity="0.4"/></g><rect x="169.5" y="19.5" width="164" height="38" rx="4.5" fill="var(--color-illustration-card)"/><rect x="169.5" y="19.5" width="164" height="38" rx="4.5" stroke="var(--color-illustration-border)"/><rect x="210" y="35" width="107" height="5" rx="1.5" fill="var(--color-illustration-element)"/><circle cx="191.5" cy="38.5" r="10.5" fill="var(--color-illustration-element)"/><rect x="61.5" y="208.5" width="164" height="38" rx="4.5" fill="var(--color-illustration-card)"/><rect x="61.5" y="208.5" width="164" height="38" rx="4.5" stroke="var(--color-illustration-border)"/><rect x="102" y="225" width="83" height="5" rx="1.5" fill="var(--color-illustration-element)"/><circle cx="83.5" cy="227.5" r="10.5" fill="var(--color-illustration-element)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M200.54 233.752C200.191 234.083 199.676 234.083 199.327 233.752L198.928 233.373C195.357 229.977 193 227.736 193 224.995C193 222.754 194.674 221 196.813 221C198.02 221 199.178 221.588 199.933 222.514C200.689 221.588 201.847 221 203.053 221C205.192 221 206.867 222.754 206.867 224.995C206.867 227.736 204.509 229.977 200.939 233.373L200.54 233.752Z" fill="var(--color-illustration-accent)" fill-opacity="0.4"/><defs><filter id="filter0_d_693_25978" x="1" y="84" width="240" height="94.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1.6"/><feComposite in2="hardAlpha" operator="out" result="offsetAlpha"/><feFlood flood-color="var(--color-illustration-border)" flood-opacity="1" result="shadowColor"/><feComposite in="shadowColor" in2="offsetAlpha" operator="in" result="shadow"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_693_25978"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_693_25978" result="shape"/></filter></defs></svg>
    </div>
    <h3 class="text-base font-semibold text-stone-800 mb-1">Welcome &#x1F44B;</h3>
    <p class="text-sm text-stone-500 mb-5 max-w-xs mx-auto">Connect a channel to start posting and managing your comments</p>
    <a href="{% url 'social_accounts:connect' workspace_id=workspace.id %}"
       class="inline-flex items-center gap-1.5 px-4 py-1.5 text-sm font-semibold text-orange-600 bg-orange-50 border border-orange-200 rounded-full hover:bg-orange-100 hover:border-orange-300 active:bg-orange-100 transition-all duration-150">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
        Connect a Channel
    </a>
</div>