var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { UmbNewsDashboardRepository } from './repository/index.js';
import { css, customElement, html, state } from '../../external/lit/index.js';
import { UmbLitElement } from '../core/lit-element/index.js';
import { UmbTextStyles } from '../core/style/index.js';
import './components/umb-news-container.element.js';
let UmbUmbracoNewsDashboardElement = class UmbUmbracoNewsDashboardElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        this._items = [];
        this._loaded = false;
        this.#repo = new UmbNewsDashboardRepository(this);
    }
    #repo;
    async firstUpdated() {
        const res = await this.#repo.getNewsDashboard();
        this._items = res.data?.items ?? [];
        this._loaded = true;
    }
    render() {
        if (!this._loaded) {
            return html `<div class="loader"><uui-loader></uui-loader></div>`;
        }
        if (this._items.length === 0) {
            return this.#renderDefaultContent();
        }
        return html `<umb-news-container .items=${this._items}></umb-news-container>`;
    }
    #renderDefaultContent() {
        const infoLinks = [
            {
                name: this.localize.term('welcomeDashboard_documentationHeadline'),
                description: this.localize.term('welcomeDashboard_documentationDescription'),
                href: 'https://docs.umbraco.com/?utm_source=core&utm_medium=dashboard&utm_campaign=docs',
            },
            {
                name: this.localize.term('welcomeDashboard_umbracoCommunityHeadline'),
                description: this.localize.term('welcomeDashboard_umbracoCommunityDescription'),
                href: 'https://community.umbraco.com/',
            },
            {
                name: this.localize.term('welcomeDashboard_resourcesHeadline'),
                description: this.localize.term('welcomeDashboard_resourcesDescription'),
                href: 'https://umbraco.com/resources/?utm_source=core&utm_medium=dashboard&utm_content=text&utm_campaign=resources',
            },
            {
                name: this.localize.term('welcomeDashboard_trainingHeadline'),
                description: this.localize.term('welcomeDashboard_trainingDescription'),
                href: 'https://umbraco.com/training/?utm_source=core&utm_medium=dashboard&utm_content=text&utm_campaign=training',
            },
        ];
        return html `<div id="info-links" class="uui-text">
			<uui-box id="umbraco-forum">
				<div>
					<h2 class="uui-h3">${this.localize.term('welcomeDashboard_umbracoForumHeadline')}</h2>
					<p>${this.localize.term('welcomeDashboard_umbracoForumDescription')}</p>
					<uui-button
						look="outline"
						target="_blank"
						href="https://forum.umbraco.com/"
						label=${this.localize.term('welcomeDashboard_umbracoForumButton')}></uui-button>
				</div>
			</uui-box>
			${infoLinks.map((link) => html `
					<a class="info-link" target="_blank" href=${link.href}>
						<h4>${link.name}</h4>
						<p>${link.description}</p>
					</a>
				`)}
		</div>`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			:host {
				display: block;
				padding: var(--uui-size-layout-1);
				max-width: 1500px;
				container-type: inline-size;
				container-name: dashboard;
			}

			.loader {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			p {
				position: relative;
			}

			#umbraco-forum {
				grid-column-start: 1;
				grid-column-end: -1;
				margin-bottom: var(--uui-size-space-4);
			}

			#info-links {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
				grid-gap: var(--uui-size-space-5);
			}

			.info-link {
				border: var(--uui-box-border-width, 0) solid
					var(--uui-box-border-color, var(--uui-color-divider-standalone, #e9e9eb));
				border-radius: var(--uui-box-border-radius, var(--uui-border-radius, 3px));
				box-shadow: var(
					--uui-box-box-shadow,
					var(--uui-shadow-depth-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))
				);
				background-color: var(--uui-color-surface);
				text-decoration: none;
				line-height: 1.5;
				padding: var(--uui-size-space-4);
			}

			.info-link h3 {
				margin-top: 0;
				margin-bottom: var(--uui-size-space-1);
			}

			.info-link p {
				margin-top: 0;
				margin-bottom: 0;
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbUmbracoNewsDashboardElement.prototype, "_items", void 0);
__decorate([
    state()
], UmbUmbracoNewsDashboardElement.prototype, "_loaded", void 0);
UmbUmbracoNewsDashboardElement = __decorate([
    customElement('umb-umbraco-news-dashboard')
], UmbUmbracoNewsDashboardElement);
export { UmbUmbracoNewsDashboardElement };
export default UmbUmbracoNewsDashboardElement;
