<button type="button" class="flex pointer flex-row items-center gh-cp-membertier-details {{if this.showDetails "
    rotate"}}" {{on "click" this.toggleSubscriptionExpanded}} aria-label="Show details">
    Details {{svg-jar "arrow-right-stroke"}}
</button>
<div class="gh-membertier-advanced {{unless this.showDetails " hide"}}" data-test-subscription={{@index}}>
    <div class="gh-membertier-details-container">
        <div class="gh-membertier-details">
            <p>
                Created&nbsp;&mdash;&nbsp;<span>{{@sub.startDate}}</span>
            </p>
            {{#if (eq @sub.attribution.referrerSource 'Unknown')}}
            {{else}}
            <p>
                Source&nbsp;&mdash;&nbsp;<span>{{@sub.attribution.referrerSource}}</span>
            </p>
            {{/if}}
            {{#if (and @sub.attribution @sub.attribution.url @sub.attribution.title)}}
            <p>
                Page&nbsp;&mdash;&nbsp;<a href="{{@sub.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ @sub.attribution.title }}</a>
            </p>
            {{/if}}
        </div>
        {{#if this.formattedOffers.length}}
        <div class="gh-membertier-offers">
            <div class="gh-membertier-details">
                {{#each this.formattedOffers as |offer|}}
                <p>
                    {{offer.label}}&nbsp;&mdash;&nbsp;<span>{{offer.detail}}</span>
                </p>
                {{/each}}
            </div>
        </div>
        {{/if}}
        {{#if @sub.cancellationReason}}
        <div class="gh-membertier-offer-cancellation">
            <div>
                <h4>Cancellation reason</h4>
                <div class="gh-membertier-cancelreason">{{@sub.cancellationReason}}</div>
            </div>
        </div>
        {{/if}}
    </div>
</div>
