<?xml version="1.0" encoding="UTF-8"?>
<template name="Social stack" category="Social" description="Up to three social handles as stacked pills, each with an accent tab." anim="slide" from="left" animMs="450">
  <field id="h1" label="Handle 1" default="YouTube /streamstudio"/>
  <field id="h2" label="Handle 2" default="Instagram @streamstudio"/>
  <field id="h3" label="Handle 3" default="X @streamstudio"/>
  <field id="accent" label="Accent colour" type="color" default="#e11d48"/>

  <rect x="110" y="760" h="60" radius="30" fill="rgba(12,15,20,0.9)" fit="h1" pad="28" extra="30" if="h1"/>
  <rect x="124" y="774" w="12" h="32" radius="6" fill="{accent}" if="h1"/>
  <text id="h1" x="152" y="760" h="60" valign="middle" size="26" weight="700" color="#ffffff" maxWidth="900" if="h1">{h1}</text>

  <rect x="110" y="832" h="60" radius="30" fill="rgba(12,15,20,0.9)" fit="h2" pad="28" extra="30" if="h2"/>
  <rect x="124" y="846" w="12" h="32" radius="6" fill="{accent}" if="h2"/>
  <text id="h2" x="152" y="832" h="60" valign="middle" size="26" weight="700" color="#ffffff" maxWidth="900" if="h2">{h2}</text>

  <rect x="110" y="904" h="60" radius="30" fill="rgba(12,15,20,0.9)" fit="h3" pad="28" extra="30" if="h3"/>
  <rect x="124" y="918" w="12" h="32" radius="6" fill="{accent}" if="h3"/>
  <text id="h3" x="152" y="904" h="60" valign="middle" size="26" weight="700" color="#ffffff" maxWidth="900" if="h3">{h3}</text>
</template>
