daggerheart/templates/views/downtime.hbs

<div>
    <div class="downtime-container">
        {{#each this.options as |option key|}}
            <div class="activity-container">
                <div class="activity-title">
                    <img class="activity-image {{#if (eq ../selectedActivity.id key)}}selected{{/if}}" src="{{option.img}}" data-action="selectActivity" data-activity="{{key}}" />
                    <span class="activity-title-text">{{localize this.name}}</span>
                </div>
                <div class="activity-body">
                    {{localize this.description}}
                </div>
            </div>
        {{/each}}
        <div class="activity-container">
            <div class="activity-title">
                <img class="activity-image {{#if (eq selectedActivity this.customActivity)}}selected{{/if}}" src="{{this.customActivity.img}}" data-action="selectActivity" data-activity="{{this.customActivity.id}}" />
                <input class="custom-name-input" type="text" name="name" value="{{this.customActivity.name}}" placeholder="{{localize this.customActivity.namePlaceholder}}" />
            </div>
            <div class="activity-body">
                <textarea class="activity-text-area" name="description" placeholder="{{localize this.customActivity.placeholder}}">{{this.customActivity.description}}</textarea>
            </div>
        </div>
    </div>
    <footer class="flexrow">
        <button data-action="takeDowntime" {{#if this.disabledDowntime}}disabled{{/if}}>{{localize "DAGGERHEART.Application.Downtime.TakeDowntime"}}</button>
        <button data-action="close">{{localize "DAGGERHEART.Application.Cancel"}}</button>
    </footer>
</div>