You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
4.5 KiB
91 lines
4.5 KiB
<div {{ attributes }}> |
|
{% if interactive %} |
|
<form |
|
class="mb-5" |
|
data-live-action-param="search" |
|
data-action="live#action:prevent"> |
|
<label class="search"> |
|
<input type="search" |
|
placeholder="{{ 'text.search'|trans }}" |
|
data-model="norender|query" |
|
value="{{ this.query }}" |
|
data-controller="search-broadcast" |
|
data-action="input->search-broadcast#onInput" |
|
/> |
|
<button type="submit"><twig:ux:icon name="iconoir:search" class="icon" /></button> |
|
</label> |
|
{% if is_granted('IS_AUTHENTICATED_FULLY') %} |
|
<div class="search-credits"> |
|
{% set count = credits > 0 ? credits : 0 %} |
|
<small class="help-text"> |
|
<em>{{ 'credit.balance'|trans({'%count%': count, 'count': count}) }}</em> |
|
</small> |
|
</div> |
|
{% endif %} |
|
</form> |
|
|
|
|
|
{% if is_granted('IS_AUTHENTICATED_FULLY') and not credits > 0 %} |
|
<div class="mb-5"> |
|
<twig:GetCreditsComponent /> |
|
</div> |
|
{% endif %} |
|
|
|
<!-- Loading Indicator --> |
|
<div class="search-loading"> |
|
<div class="spinner" data-loading> |
|
<div class="lds-dual-ring"></div> |
|
</div> |
|
</div> |
|
{% endif %} |
|
|
|
<!-- Results --> |
|
{% if this.results is not empty %} |
|
{% if this.selectMode %} |
|
<div class="article-list"> |
|
<ul class="list-unstyled d-grid gap-2"> |
|
{% for art in this.results %} |
|
{% if art.slug is not empty and art.title is not empty %} |
|
{% set artKind = art.kind ? art.kind.value : 30023 %} |
|
{% set coordinate = artKind ~ ':' ~ art.pubkey ~ ':' ~ art.slug %} |
|
<li class="card p-3"> |
|
<div class="d-flex justify-content-between align-items-start gap-3"> |
|
<div class="flex-fill"> |
|
<div class="metadata"> |
|
<small>by <twig:Molecules:UserFromNpub ident="{{ art.pubkey }}" user="{{ authors[art.pubkey] }}" /></small> |
|
<small class="ms-2">{{ art.createdAt|date('F j Y') }}</small> |
|
</div> |
|
<a href="{{ path('article-slug', {slug: art.slug}) }}"><h3 class="h5 m-0">{{ art.title }}</h3></a> |
|
{% if art.summary %}<p class="mt-2 small line-clamp-5">{{ art.summary }}</p>{% endif %} |
|
<code class="small text-muted">{{ coordinate }}</code> |
|
</div> |
|
<div> |
|
<button |
|
class="btn btn-sm btn-primary" |
|
data-action="live#action" |
|
data-live-action-param="addToReadingList" |
|
data-live-coordinate-param="{{ coordinate }}" |
|
>Add to list</button> |
|
</div> |
|
</div> |
|
</li> |
|
{% endif %} |
|
{% endfor %} |
|
</ul> |
|
</div> |
|
{% else %} |
|
<twig:Organisms:CardList :list="this.results" class="article-list" /> |
|
|
|
{# Show message to anonymous users about limited results #} |
|
{% if not is_granted('IS_AUTHENTICATED_FULLY') and this.results is not empty %} |
|
<div class="notice info mt-4"> |
|
<p><strong>Showing limited results (5 articles)</strong></p> |
|
<p>Sign in to see more results and unlock full search capabilities!</p> |
|
<a href="{{ path('app_login') }}" class="btn btn-primary btn-sm mt-2">Sign In</a> |
|
</div> |
|
{% endif %} |
|
{% endif %} |
|
{% elseif this.query is not empty %} |
|
<p><small>{{ 'text.noResults'|trans }}</small></p> |
|
{% endif %} |
|
</div>
|
|
|