<div class="content-panel many-inputs">
    <div class="header" trans>Project Settings</div>

    <div class="input-container">
        <label for="project-framework" trans>Framework</label>
        <select name="project-framework" id="project-framework" [(ngModel)]="selectedFramework" (ngModelChange)="changeFramework(selectedFramework)">
            <option [ngValue]="null" trans>None</option>
            <option value="bootstrap-3">Bootstrap 3</option>
            <option value="bootstrap-4">Bootstrap 4</option>
        </select>
    </div>

    <div class="input-container">
        <div class="fake-label" trans>Template</div>
        <div class="box">
            <div class="fake-input" (click)="openTemplatesPanel()">
                <span *ngIf="activeProject.hasTemplate()">{{activeProject.getTemplate().name}}</span>
                <span *ngIf="!activeProject.hasTemplate()" trans>None</span>
            </div>

            <button mat-raised-button color="primary" (click)="openTemplatesPanel()" trans>Change</button>
        </div>
    </div>

    <div class="input-container">
        <div class="fake-label" trans>Theme</div>
        <div class="box">
            <div class="fake-input" (click)="openThemesPanel()">{{activeProject.get().model.theme || 'None'}}</div>
            <button mat-raised-button color="primary" (click)="openThemesPanel()" trans>Change</button>
        </div>
    </div>
</div>

<div class="content-panel many-inputs">
    <div class="header" trans>Builder Settings</div>

    <div class="setting-container">
        <mat-slide-toggle color="primary" [(ngModel)]="settings.autoSave" (ngModelChange)="updateSettings()" trans>Auto Save</mat-slide-toggle>
        <p trans>Toggle auto saving of project when changes are made in the builder.</p>
    </div>

    <div class="setting-container">
        <mat-slide-toggle color="primary" [(ngModel)]="settings.hoverBoxEnabled" (ngModelChange)="updateSettings()" trans>Hover Box</mat-slide-toggle>
        <p trans>Toggle visibility of box that appears when hovering over elements in the builder.</p>
    </div>

    <div class="setting-container">
        <mat-slide-toggle color="primary" [(ngModel)]="settings.selectedBoxEnabled" (ngModelChange)="updateSettings()" trans>Selected Box</mat-slide-toggle>
        <p trans>Toggle visibility of box that appears when clicking on element in the builder.</p>
    </div>
</div>