---
import type { SquidexEditable, Multilingual } from './SharedProperties.js';
import type { Brand } from "../data/models/multis/Brand";
import { getAssetById, getLocaleField } from "../data/api-client";
import path from "node:path";
import { renderMarkdown } from "../lib/rendering";

interface Props extends Multilingual, SquidexEditable {
	brand: Brand,
}

const { brand, editToken, locale } = Astro.props;

let brandLogoImage = path.posix.join('/img', (await getAssetById(brand.logoImage![locale]))
						.links['content']
							.href
								.split('/')
									.reverse()
									.filter((_value, index, array) => index < (array.length - index - 2))
									.reverse()
										.join('/'));
---

<div class="brand" data-squidex-token={editToken}>
    <div class="flex">
        { brandLogoImage &&
		    <img src={brandLogoImage} alt={brand.brandName[locale]} title={brand.brandName[locale]} />
        }
        <div class="flex-right">
            {getLocaleField(locale, brand.shortDescription!) && <div class="short-desc"><Fragment set:html={renderMarkdown(getLocaleField(locale, brand.shortDescription!)!)} /></div> }
        </div>
    </div>
    {getLocaleField(locale, brand.longDescription!) && <div class="after-flex"><Fragment set:html={renderMarkdown(getLocaleField(locale, brand.longDescription!)!)} /></div> }
</div>

<style>
	.brand {
		margin-bottom: 2rem;
		border: 1px solid rgba(var(--accent-light), 25%);
		background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
		padding: 0.5rem;
		border-radius: 8px;
  		font-weight: 400;
  		font-style: normal;
		text-align: left;
	}
	.brand img {
		min-width: 8rem;
		max-width: 10rem;
	}
	.brand .flex {
		display: flex;
		gap: 0.8rem;
		align-items: center;
	}
	.brand .after-flex p {
		text-indent: 5em each-line;
		color: pink;
	}
	.brand .short-desc {
		font-family: "Caveat", cursive;
		font-size: 2.2rem;
	}
	.brand .float-left {
		justify-content: flex-start; 
	}
	.brand .flex-right {
		justify-content: flex-start; 
		position: relative;
	}
	.brand code {
		font-size: 0.8em;
		font-weight: bold;
		background: rgba(var(--accent-light), 12%);
		color: rgb(var(--accent-light));
		border-radius: 4px;
		padding: 0.3em 0.4em;
	}
	.brand strong {
		color: rgb(var(--accent-light));
		/* font-weight: 800; */
	}
</style>