<?xml version="1.0" encoding="utf-8"?>
<templates id="template" xml:space="preserve">
<t t-name="web_unsplash.UnsplashError">
    <div class="alert alert-info w-100">
        <h4><t t-esc="props.title"/></h4>
        <p><t t-esc="props.subtitle"/></p>
        <UnsplashCredentials t-if="props.showCredentials" submitCredentials="props.submitCredentials" hasCredentialsError="props.hasCredentialsError"/>
    </div>
</t>

<t t-name="web_unsplash.UnsplashCredentials">
    <div class="d-flex align-items-center flex-wrap">
        <a href="https://www.odoo.com/documentation/17.0/applications/websites/website/optimize/unsplash.html#generate-an-unsplash-access-key"
           class="me-1" target="_blank">Get an Access key</a>
        and paste it here:
        <input type="text"
            class="o_input o_required_modifier form-control w-auto mx-2"
            id="accessKeyInput"
            placeholder="Paste your access key here"
            t-model="state.key"
            t-on-input="() => this.state.hasKeyError = false"
            t-att-class="{ 'is-invalid': state.hasKeyError }"/>
        and paste
        <a href="https://www.odoo.com/documentation/17.0/applications/websites/website/optimize/unsplash.html#generate-an-unsplash-application-id"
           class="mx-1" target="_blank">Application ID</a>
        here:
        <input type="text"
            class="o_input o_required_modifier form-control w-auto ms-2"
            placeholder="Paste your application ID here"
            t-model="state.appId"
            t-on-input="() => this.state.hasAppIdError = false"
            t-att-class="{ 'is-invalid': state.hasAppIdError }"/>
        <button type="button" class="btn btn-primary w-auto ms-3 p-auto save_unsplash" t-on-click="() => this.submitCredentials()">Apply</button>
    </div>
</t>

<t t-inherit="web_editor.ExternalImage" t-inherit-mode="extension">
    <xpath expr="//t[@t-if]" position="after">
        <t t-elif="record.mediaType == 'unsplashRecord'">
            <AutoResizeImage src="record.url"
                author="record.user.name"
                authorLink="record.user.links.html"
                name="record.user.name"
                title="record.user.name"
                altDescription="record.alt_description"
                selected="this.selectedRecordIds.includes(record.id)"
                onImageClick="() => this.onClickRecord(record)"
                minRowHeight="MIN_ROW_HEIGHT"
                onLoaded="(imgEl) => this.onImageLoaded(imgEl, record)"/>
        </t>
    </xpath>
</t>

<t t-name="web_unsplash.ImagesListTemplate" t-inherit="web_editor.ImagesListTemplate" t-inherit-mode="extension">
    <xpath expr="//t[@id='o_we_media_library_images']" position="replace">
        <t id='o_we_media_library_images' t-if="['all', 'unsplash', 'media-library'].includes(state.searchService)">
            <t t-foreach="combinedRecords" t-as="record" t-key="record.id">
                <t t-call="web_editor.ExternalImage"/>
            </t>
        </t>
    </xpath>
</t>

<t t-inherit="web_editor.FileSelector" t-inherit-mode="extension">
    <xpath expr="//div[@name='load_more_attachments']" position="before">
        <div t-if="state.unsplashError" class="d-flex mt-2 unsplash_error">
            <UnsplashError
                title="errorTitle"
                subtitle="errorSubtitle"
                showCredentials="['key_not_found', 401].includes(state.unsplashError)"
                submitCredentials="(key, appId)  => this.submitCredentials(key, appId)"
                hasCredentialsError="state.unsplashError === 401"/>
        </div>
    </xpath>
</t>

<t t-inherit="web_editor.FileSelectorControlPanel" t-inherit-mode="extension">
    <xpath expr="//option[@value='media-library']" position="after">
        <option t-if="props.useUnsplash" t-att-selected="props.searchService === 'unsplash'" value="unsplash">Photos (via Unsplash)</option>
    </xpath>
</t>

<t t-inherit="web_editor.FileSelector" t-inherit-mode="extension">
    <xpath expr="//FileSelectorControlPanel" position="attributes">
        <attribute name="useUnsplash">state.useUnsplash</attribute>
    </xpath>
</t>
</templates>
