+ {
+ if (this.isLoading) return;
+ this.mode = 'newCollection';
+ }}
+ icon="vaadin:plus"
+ slot="icon">
+
+
+
+
+ {
+ if (this.isLoading) return;
+ this.mode = 'explore';
+ this.currentCollection = null;
+ }}
+ icon="vaadin:search"
+ slot="icon">
+
+
+
+
+
+ + ${translate( + 'gifs.gchange1' + )} +
+
+ ${this.mode === 'myCollection' && !this.currentCollection
+ ? html`
+ ${this.isLoading === true
+ ? html`
+ this.getAllCollections(val)}
+ .getMoreExploreGifs=${(val) =>
+ this.getMoreExploreGifs(val)}
+ .exploreCollections=${this
+ .exploreCollections}
+ .setCurrentCollection=${(val) =>
+ this.setCurrentCollection(val)}
+ >
+ `
+ }
+ `
+ : ''
+ }
+ ${this.currentCollection && this.mode === 'myCollection'
+ ? html`
+
+ `
+ : ''}
+ ${(this.myGifCollections.length === 0 && !this.isLoading) ? (
+ html`
+
${translate('gifs.gchange13')}
+ `
+ ) : (
+ html`
+ ${(this.myGifCollections || []).map((collection) => {
+ return html`
+ {
+ this.currentCollection =
+ collection;
+ }} class='collection-card'>
+ ${collection.identifier}
+
+ `;
+ })}
+ `
+ )}
+ `
+ : ''
+ }
+ ${this.mode === 'subscribedCollection' &&
+ !this.currentCollection
+ ? html`
+ ${this.isLoading === true
+ ? html``
+ : ''}
+ ${(this.mySubscribedCollections.length === 0 && !this.isLoading) ? (
+ html`
+
${translate('gifs.gchange14')}
+ `
+ ) : (
+ html`
+ ${this.mySubscribedCollections.map(
+ (collection) => {
+ return html`
+ {
+ this.currentCollection =
+ collection;
+ }} class='collection-card'>
+ ${collection.identifier}
+
+ `;
+ }
+ )}
+ `
+ )}
+ `
+ : ''
+ }
+ ${this.mode === 'explore' && !this.currentCollection
+ ? html`
+ ${this.isLoading === true
+ ? html`
+
+ `
+ : html`
+
+ ${this.currentCollection.gifUrls.map((gif) => {
+ return html`
+ this.sendMessage(val)}
+ .setOpenGifModal=${(val) => this.setOpenGifModal(val)}
+ .class=${'gif-image'}
+ .gif=${gif}
+ .alt=${'gif-image'}>
+
+ `;
+ })}
+
+ `
+ : ''
+ }
+ ${this.currentCollection &&
+ this.mode === 'subscribedCollection'
+ ? html`
+
+ ${this.currentCollection.gifUrls.map((gif) => {
+ return html`
+ this.sendMessage(val)}
+ .setOpenGifModal=${(val) => this.setOpenGifModal(val)}
+ .class=${'gif-image'}
+ .gif=${gif}
+ .alt=${'gif-image'}>
+
+ `;
+ })}
+
+ `
+ : ''
+ }
+ ${this.currentCollection && this.mode === 'explore'
+ ? html`
+
+ ${this.currentCollection.gifUrls.map((gif) => {
+ return html`
+ this.sendMessage(val)}
+ .setOpenGifModal=${(val) => this.setOpenGifModal(val)}
+ .class=${'gif-image'}
+ .gif=${gif}
+ .alt=${'gif-image'}>
+
+ `;
+ })}
+
+ ${this.isSubscribed ? (
+ html`
+
+ `
+ ) : (
+ html`
+
+ `
+ )}
+ `
+ : ''
+ }
+ ${this.mode === 'newCollection' && this.isLoading === false
+ ? html`
+
+
+ `
+ : this.mode === 'newCollection' && this.isLoading === true ? (
+ html`
+
+
+ + ${translate('gifs.gchange5')} +
++ ${translate('gifs.gchange6')} +
+
+ this.shadowRoot
+ .getElementById(
+ 'file-picker-gif'
+ )
+ .click()}
+ class="new-collection-container"
+ style=${this.gifsToBeAdded.length > 0 ? "padding: 10px 0;" : "padding: 60px 0;"}
+ >
+
+
+
+
+
+ {
+ this.newCollectionName =
+ e.target.value;
+ }}
+ />
+
+
+
+ ${this.gifsToBeAdded.map((gif, i) => {
+ return html`
+
+
+ 
+ {
+ this.gifsToBeAdded[i] = {
+ ...gif,
+ name: e.target
+ .value,
+ };
+ }}
+ />
+
+ `;
+ })}
+
+
+
+
+
+
+
+ `
+ )
+ : ''
+ }
+
+