<templates id="template" xml:space="preserve">
    <t t-name="web_unsplash.UnsplashCredentials">
        <div class="d-flex align-items-center flex-wrap">
            <a href="https://www.odoo.com/documentation/latest/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/latest/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>
</templates>
