@php $icon = $cause->category->icon; @endphp
<article class="ccard ccard--{{ $icon }}">
    <a class="ccard__media" href="{{ route('causes.show', $cause) }}" tabindex="-1" aria-hidden="true">
        @if ($cause->thumb_url)
            <img src="{{ $cause->thumb_url }}" alt="" width="640" height="400" loading="lazy">
        @else
            <span class="ccard__ph">
                <svg class="ccard__ph-bg" viewBox="0 0 24 24"><use href="#i-{{ $icon }}"/></svg>
                <span class="ccard__ph-ico"><svg class="i i--xl"><use href="#i-{{ $icon }}"/></svg></span>
            </span>
        @endif
        @if ($site('reg_80g'))<span class="tag-80g">Tax benefits</span>@elseif ($cause->is_featured)<span class="badge">Featured</span>@endif
        <span class="ccard__chip">{{ $cause->category->name }}</span>
    </a>
    <div class="ccard__body">
        <h3 class="ccard__title"><a href="{{ route('causes.show', $cause) }}">{{ $cause->title }}</a></h3>
        <p class="ccard__sum">{{ $cause->summary }}</p>

        @if ($cause->progress !== null)
            <div class="progress progress--sm" role="progressbar" aria-label="Funding progress" aria-valuenow="{{ $cause->progress }}" aria-valuemin="0" aria-valuemax="100"><span style="width: {{ max($cause->progress, 2) }}%"></span></div>
            <p class="ccard__raised"><strong>{{ \App\Support\Fmt::rupees($cause->raised) }}</strong> raised of {{ \App\Support\Fmt::rupees($cause->goal) }}</p>
        @endif

        <div class="ccard__foot">
            <p class="ccard__price">
                @if ($cause->acceptsItems() && $cause->from_price)
                    <small>Items from</small> <strong>{{ \App\Support\Fmt::rupees($cause->from_price) }}</strong>
                @else
                    <small>Give</small> <strong>Any amount</strong>
                @endif
            </p>
            <a class="btn btn--green ccard__cta" href="{{ route('causes.show', $cause) }}">Donate<span class="sr-only"> to {{ $cause->title }}</span> <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a>
        </div>
    </div>
</article>