{{if counter > 0}}
    <button class="btn favourites-savedbtn d-flex align-items-center" data-bs-toggle="modal" data-bs-target="#trppr-favourites-model">
        <span class="tr-fav-title me-2">{{>i18n('Favourites')}}</span>
        <div class="position-relative">
            <i class="fa-solid fa-2x fa-heart fa-beat" style="color: #FC3163;"></i>
            <span class="trppr-favourites-counter">{{>counter}}</span>
        </div>
    </button>
{{else}}
    <button class="btn favourites-savedbtn d-flex align-items-center" onclick="$objTrpprMain.showToast('{{>i18n('Favourites')}}', '{{>i18n('No favourites yet...')}}', '')">
        <span class="tr-fav-title me-2">{{>i18n('Favourites')}}</span>
        <div class="position-relative"><i class="fa-light fa-2x fa-heart" style="color: #FC3163;"></i></div>
    </button>
{{/if}}
<div class="modal fade" id="trppr-favourites-model" aria-labelledby="trpprFavouritesModel" aria-hidden="true" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{>i18n('Favourites')}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="trppr-favourites-list">
                    {{props favourites ~i18n=i18n}}
                        <span id="trppr-favourites-product-{{>prop.id}}">
                            <div class="row g-0">

                                <div class="col-1 position-relative d-flex justify-content-center">
                                    <div class="timeline d-flex align-items-center position-relative">
                                        <button class="btn del d-flex align-items-center justify-content-center" onclick="$objTrpprMain.favourite(this, '{{>prop.id}}', '', '', true); return false;">
                                            <i class="fa-solid fa-sm fa-trash"></i>
                                        </button>
                                    </div>
                                </div>

                                <div data-trppr-list-item-class="" data-trppr-list="{{>prop.slug}}" data-trppr-list-alternative=".tr-fav-item-alternative" class="userdata position-relative col-11">
                                    <div class="tr-fav-item p-2 my-1 position-relative">
                                        <div class="row align-items-center g-0">
                                            <!-- Thumbnail-->
                                            <div class="thumbnail col-3"><img data-trppr-list-item-image src="" class="" /></div>
                                            <!-- Post Content-->
                                            <div class="col-9">
                                                <div class="row mx-2">
                                                    <div class="col">
                                                        <h2 class="title m-0" data-trppr-list-item="name">{{>prop.name}}</h2>
                                                        <div class="sub_title"><span data-trppr-list-item="country"></span> | <span data-trppr-list-item="district"></span> | <span data-trppr-list-item="place"></span></div>
                                                        <div class="post-meta row flex-column"><span class="col" data-trppr-list-item="transporttype"></span> <span class="col" data-trppr-list-item="duration"></span></div>
                                                    </div>
                                                    <div class="ms-auto col-auto">
                                                        <div class="tr-price normal d-flex flex-column text-center mb-2">
                                                            <div class="top pt-1">{{>~i18n('Starting at')}}</div>
                                                            <div class="bottom nowrap">
                                                                <span class="mx-2" data-trppr-list-item="price"></span>
                                                                <small>{{>~i18n('p.p.')}}</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <textarea class="trppr-favourites-item-data" style="display:none;" data-trppr-list-item="data"></textarea>
                                            </div>
                                        </div>
                                        <a href="/" class="stretched-link" data-trppr-list-item-link></a>
                                        <div class="tr-fav-item-alternative"  style="display:none;">
                                            <div class="tr-fav-item p-2 my-1 position-relative">
                                                <h2 class="title m-0" data-trppr-list-item="name">{{>prop.name}}</h2>
                                                <div>{{>~i18n('Unfortunately this selection is not available (anymore)')}}</div>
                                                <a href="{{>prop.slug}}">{{>~i18n('View the original selection')}}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </span>
                    {{/props}}
                </div>
                <div class="trppr-favourites-share" style="display:none;">
                    <div class="alert alert-danger trppr-favourites-share-error" style="display:none;">
                        {{>i18n('Could not send favourites, try again later')}}
                    </div>
                    <form class="row" id="trppr-favourites-share-form" class="needs-validation" novalidate>
                        <div class="mb-3">
                            <label for="trppr-favourites-share-recipient" class="form-label">{{>i18n('E-mail')}}</label>
                            <input type="email" name="recipient" class="form-control" id="trppr-favourites-share-recipient" required>
                        </div>
                        <div class="mb-3">
                            <label for="trppr-favourites-share-message" class="form-label">{{>i18n('Personal message')}}</label>
                            <textarea class="form-control" name="message" id="trppr-favourites-share-message" rows="5" required></textarea>
                        </div>
                        <div style="width:1px; height:1px; overflow:hidden; position: absolute; top: -100px;">
                            <input type="textfield" name="address">
                            <input type="textfield" name="gender">
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                {{if counter > 0}}
                    <button id="trppr-favourites-share-button" type="button" class="trppr-favourites-list btn btn-primary">{{>i18n('Share favourites')}}</button>
                    <button id="trppr-favourites-back-button" type="button" class="trppr-favourites-share btn btn-secondary" style="display:none;">{{>i18n('Back')}}</button>
                    <button id="trppr-favourites-send-button" type="button" class="trppr-favourites-share btn btn-primary" style="display:none;">{{>i18n('Send')}}</button>
                {{/if}}
            </div>
        </div>
    </div>
</div>