// Linha do catálogo de templates de aplicação: logo à esquerda (vetor ou
// raster conforme logo_kind), nome + descrição, e o botão "Escolher" à direita.
component {
props {
prop(name = name)
prop(name = description)
prop(name = logo)
prop(name = logo_kind)
prop(name = action)
}
resources {
style """
.tpl_row {
width: fill;
padding: 12 0;
align-y: center;
spacing: 14;
}
.tpl_logo_box {
width: 34;
height: 34;
align-x: center;
align-y: center;
}
.tpl_logo {
width: 30;
height: 30;
}
"""
}
row(class = tpl_row) {
column(class = tpl_logo_box) {
svg(class = tpl_logo, src = @logo, if = @logo_kind, equals = svg)
image(class = tpl_logo, src = @logo, if = @logo_kind, equals = img)
}
column(class = header_titles) {
text(class = env_key, content = "@name")
text(
class = muted,
if = @description,
not_equals = "",
content = "@description",
)
}
button(class = btn_primary, on_click = @action, text = "Escolher ›")
}
}