/**
 * Inline banner for repository / tree load errors and empty datasource warnings (Sitecore, Umbraco, SharePoint).
 */
Vue.component('repository-connection-banner', {
    props: {
        banner: {
            type: Object,
            default: null
        }
    },
    template: `
        <div v-if="banner" class="connection-result-alert" :class="'connection-result-alert--' + (banner.kind || 'error')">
            <div class="connection-result-alert__title">{{ banner.title }}</div>
            <p class="connection-result-alert__brief">{{ banner.brief }}</p>
            <details v-if="banner.details" class="connection-result-alert__details">
                <summary>Full details</summary>
                <pre class="connection-result-alert__pre">{{ banner.details }}</pre>
            </details>
        </div>
    `
});
