{% props title: String = "", size: String = "", action_href: String = "", action_label: String = "Ask for access", inner_block: Slot %}
{%- if size == "compact" %}
<div class="ui-restricted" data-size="compact"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg><p>{{ inner_block }}</p></div>
{%- else %}
<div class="ui-restricted"{% if !size.is_empty() %} data-size="{{ size }}"{% end %}>
<span class="ui-restricted-icon"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span>
<h2 class="ui-restricted-title">{{ title }}</h2>
<p>{{ inner_block }}</p>
{%- if !action_href.is_empty() %}
<a class="ui-btn" data-variant="outline" data-size="sm" href="{{ action_href }}">{{ action_label }}</a>
{%- end %}
</div>
{%- end %}