subscribedAccountsList.html

subscribedAccountsList.html

<template>
    <div class="slds-page-header">
        <div class="slds-page-header__row">
            <div class="slds-page-header__col-title">
                <div class="slds-media">
                    <div class="slds-media__figure">
                        <lightning-icon icon-name="standard:account"></lightning-icon>
                    </div>
                    <div class="slds-media__body">
                        <h1 class="slds-page-header__title slds-truncate" title="My Subscribed Accounts">My Favorites Accounts</h1>
                    </div>
                </div>
            </div>
            <div class="slds-page-header__col-actions">
                <template if:false={isLoading}>
                    <lightning-button-icon icon-name="utility:refresh" alternative-text="Refresh" title="Refresh" variant="bare" onclick={handleRefresh}></lightning-button-icon>
                </template>
            </div>
        </div>
    </div>
    <div class="container">
        <template if:true={isLoading}>
            <lightning-spinner alternative-text="Loading" size="small"></lightning-spinner>
        </template>
        <template if:true={accounts}>
            <ul class="slds-m-around_medium fancy-list">
                <template for:each={accounts} for:item="account" for:index="index">
                    <li key={account.Id} data-id={account.Id}  class="fancy-item">
                        <a href="javascript:void(0);" onclick={handleAccountClick} data-id={account.Id} target="_blank">{account.Name}</a>
                        <lightning-button-icon icon-name="utility:delete" alternative-text="Remove" title="Remove from favorites" variant="bare" data-id={account.Id} onclick={handleRemoveClick} class="remove-button"></lightning-button-icon>
                    </li>
                </template>
            </ul>
        </template>
        <template if:false={accounts}>
            <div class="slds-p-around_medium">No subscribed accounts found.</div>
        </template>
    </div>
</template>