"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
Object.defineProperty(exports, "__esModule", { value: true });
const obfuscate_html_attr_1 = require("@sealcode/obfuscate-html-attr");
const path_1 = require("path");
const tempseal_1 = require("@sealcode/tempseal");
let Team;
const TeamMember = (add_effect) => (member) => __awaiter(void 0, void 0, void 0, function* () {
    const facebook_icon = yield tempseal_1.SideEffects.File.fromPath(path_1.resolve(__dirname, "facebook__team-member__black.svg"));
    const linkedin_icon = yield tempseal_1.SideEffects.File.fromPath(path_1.resolve(__dirname, "linkedin__team-member__black.svg"));
    yield Promise.all([add_effect(facebook_icon), add_effect(linkedin_icon)]);
    return /* HTML */ `
		<div class="team-member">
			<div class="team-member__image">
				${yield tempseal_1.SideEffects.ResponsiveImage(add_effect, {
        image_path: member.image_path,
        resolutions: [1000, 750, 500, 400],
        sizes_attr: "(max-width: 548px) calc(100vw - 2rem), 500px",
        alt: (member.name || "") + " - zdjęcie",
    })}
			</div>
			<div class="team-member__name">
				${member.name || ""}
			</div>
			<div class="team-member__role">
				${member.role || ""}
			</div>
			<div class="team-member__description">
				<p>
					<span class="team-member__description__label"
						>Area of expertise: </span
					>${member.area_of_expertise || ""}
				</p>
				<p>
					<span class="team-member__description__label"
						>Key skill: </span
					>${member.key_skill || ""}
				</p>
				<p>
					<span class="team-member__description__label">
						${member.gender == "female"
        ? "What her colleagues say about her: "
        : "What his colleagues say about him: "}
					</span>
					${member.opinion || ""}
				</p>
				<p>
					<span class="team-member__description__label"
						>Is most proud of: </span
					>${member.proud_of || ""}
				</p>
				<p>
					<span class="team-member__description__label"
						>Can often be heard saying: </span
					>${member.heard_saying || ""}
				</p>
			</div>
			${member.email
        ? /* HTML */ `
						<a
							href="mailto:${obfuscate_html_attr_1.default(member.email)}"
							class="team-member__email"
						>
							${obfuscate_html_attr_1.default(member.email)}
						</a>
				  `
        : ""}
			<div class="team-member__telephone">
				${member.telephone || ""}
			</div>
			<div class="social-icons">
				<a href="${member.facebook || ""}"
					><img src="${yield facebook_icon.getUrlPlaceholder()}"
				/></a>
				<a href="${member.linkedin || ""}"
					><img src="${yield linkedin_icon.getUrlPlaceholder()}"
				/></a>
			</div>
		</div>
	`;
});
Team = (add_effect, config, { title, members }) => __awaiter(void 0, void 0, void 0, function* () {
    const html = /* HTML */ `
		<div class="team" id="the-team">
			<div class="wrapper">
				<div class="the-team"><h2>${title || ""}</h2></div>
				<div class="members">
					${(yield Promise.all(members.map(TeamMember(add_effect)))).join("")}
				</div>
			</div>
		</div>
	`;
    yield Promise.all([
        tempseal_1.SideEffects.Scss.addFromPath(add_effect, config, path_1.resolve(__dirname, "team.scss")),
        add_effect(new tempseal_1.SideEffects.HtmlChunk(html)),
    ]);
});
Team.identifier = "team";
exports.default = Team;
//# sourceMappingURL=team.js.map