<div id="mastermind-lock">
    <h1>{{general.label}}</h1>
    {{#if general.description}}<p class="notes">{{{general.description}}}</p>{{/if}}
    <div class="previous-attempts">
        {{#each previousPips as |attempt|}}

        <div class="attempt-container">

            {{#each attempt as |pip|}}
            <div class="mastermind-pip" data-option-index="{{pip.optionIndex}}">
                <div class="pip-inner"
                    style="background-color: {{pip.selected}}; outline: 2px solid {{pip.guessColor}}; box-shadow: 0 0 10px {{pip.guessColor}}">
                    {{#unless pip.isColor}}{{{pip.selected}}}{{/unless}}
                </div>
            </div>
            {{/each}}

        </div>


        {{/each}}
    </div>
    <div class="current-attempt">
        {{#each solutionPips as |pip|}}
        <div class="mastermind-pip" data-option-index="{{pip.optionIndex}}">
            <div class="pip-inner" style="background-color: {{pip.selected}};">
                    {{#unless pip.isColor}}{{{pip.selected}}}{{/unless}}
            </div>
        </div>
        {{/each}}
    </div>
</div>