<!-- Welcome -->
<div class="dialog text-center" ng-if="ctrl.view == 'welcome'">
    <div class="padding">
        <h1 localize="welcome"></h1>
        <p localize="welcome_description"></p>

        <div class="text-center" style="margin-top: 20px;">
            <div style="width: 100%;" dropdown-select="ctrl.languages" dropdown-model="ctrl.language"
                 dropdown-onchange="ctrl.languageChanged(selected)" dropdown-item-label="name"></div>
        </div>

        <div style="margin-top: 30px;">
            <p localize="gettingstarted_enter_email"></p>
            <input class="form-control margin-top" id="email" name="email" placeholder="mail@example.org"
                   ng-model="options.email" type="email" required>
        </div>

        <div class="flex-row flex-row-center flex-vertical-align" style="margin-top: 10px;" ng-if="!ctrl.steamEnabled">
            <div class="toggle-switch" ng-class="{ active: ctrl.acceptedEula }" style="margin-right: 10px;"
                 ng-click="ctrl.acceptedEula = !ctrl.acceptedEula">
                <span></span>
            </div>
            <a ng-click="ctrl.view ='eula'" localize="accept_eula"></a>
        </div>
    </div>


    <button class="big" ng-disabled="!ctrl.steamEnabled && !ctrl.acceptedEula" ng-click="ctrl.confirmWelcome()"
            localize="confirm"></button>
</div>

<div style="position: absolute; top: 10px; right: 10px;" ng-if="options.developerMode">
    <table class="color-darkblack" style="width: 100px;">
        <tr>
            <td>Steam:</td>
            <td>{{ ctrl.steamEnabled }}</td>
        </tr>
        <tr>
            <td>WebGL:</td>
            <td>{{ ctrl.webGlEnabled }}</td>
        </tr>
    </table>
</div>

<div class="buttons" ng-if="ctrl.view == null">
    <button ng-click="ctrl.continueGame()" ng-if="settings != null" localize="continue"></button>
    <button class="cancel" ng-click="ctrl.view = 'newGame'" localize="new_game"></button>
    <button class="cancel" ng-click="ctrl.view = 'loadGame'" ng-disabled="ctrl.saveGames.length == 0"
            localize="load_game"></button>
    <button class="cancel" ng-click="ctrl.view = 'options'" localize="options"></button>
    <button class="cancel" ng-click="ctrl.view = 'mods'" localize="mods"></button>
    <button class="red" ng-click="ctrl.exitGame()" localize="exit"></button>
</div>

<div class="dialog" ng-if="ctrl.view == 'newGame'" style="min-height: 270px;">
    <h1>
        <span localize="new_game"></span>
        <i class="fa fa-times pull-right close-button" ng-click="ctrl.view = null"></i>
    </h1>

    <div class="padding animated fadeIn flex-super-center">
        <form name="step1Form" ng-submit="step1Form.$valid && ctrl.startGame()" novalidate>

            <p localize="gettingstarted_enter_name"></p>

            <div class="form-group padding">
                <input class="form-control" id="companyName" maxlength="31" name="companyName"
                       placeholder="{{ GetLocalized('gettingstarted_name_placeholder') }}" ng-minlength="3"
                       ng-model="ctrl.companyName"
                       autocomplete="off" required>
            </div>

            <div class="text-center margin-top">
                <button type="submit" ng-disabled="!step1Form.$valid" id="startGameButton" localize="continue"></button>
            </div>
        </form>
    </div>
</div>

<div class="dialog" ng-if="ctrl.view == 'loadGame'" style="height: 340px;overflow: auto;">
    <h1>
        <span localize="load_game"></span>
        <i class="fa fa-times pull-right close-button" ng-click="ctrl.view = null"></i>
    </h1>

    <div class="padding animated fadeIn">
        <table>
            <tr ng-repeat="saveGame in ctrl.saveGames | orderBy: '-day' track by saveGame.id"
                uib-tooltip="{{ GetLocalized('tooltip_game_over') }}" tooltip-enable="saveGame.gameover">
                <td ng-class="{ 'line-through': saveGame.gameover }">
                    {{ saveGame.companyName }}
                </td>
                <td localize="topbar_day" localize-data-day="{{ saveGame.day }}"></td>
                <td class="text-right">
                    <button class="red small" ng-click="ctrl.deleteSaveGame(saveGame)" localize="delete"></button>
                    <button class="small" ng-click="ctrl.loadSaveGame(saveGame.fileName)" localize="load"></button>
                </td>
            </tr>
        </table>
    </div>
</div>


<div class="dialog" ng-if="ctrl.view == 'options'">
    <h1>
        <i class="fa fa-wrench"></i>
        <span localize="options"></span>
        <i class="fa fa-times pull-right close-button" ng-click="ctrl.view = null"></i>
    </h1>
    <p class="text-center dimmed padding" localize="changes_saved_instant"></p>

    <div style="overflow: auto; height: 450px;">
        <div class="padding">
            <div class="flex-row">
                <div class="flex1 text-bold column-center padding" localize="fullscreen">
                </div>
                <div class="flex1 text-right column-center padding">
                    <div ng-click="ctrl.toggleFullscreen()" ng-class="{'active': options.fullScreen }"
                         class="toggle-switch pull-right"><span></span></div>
                </div>
            </div>

            <div class="flex-row">
                <div class="flex1 text-bold column-center padding" localize="language"></div>
                <div class="flex1 text-right column-center padding">
                    <div dropdown-select="ctrl.languages" dropdown-model="ctrl.language"
                         dropdown-onchange="ctrl.languageChanged(selected)" dropdown-item-label="name"></div>
                </div>
            </div>

            <div class="flex-row">
                <div class="flex1 text-bold column-center padding" localize="master_volume"></div>
                <div class="flex1 text-right column-center padding">
                    <input type="range" min="0" max="100" ng-model="options.masterVolume"/>
                </div>
            </div>

            <div class="flex-row">
                <div class="flex1 text-bold column-center padding" localize="music_volume"></div>
                <div class="flex1 text-right column-center padding">
                    <input type="range" min="0" max="100" ng-model="options.musicVolume"/>
                </div>
            </div>

            <div class="flex-row">
                <div class="flex1 text-bold column-center padding" localize="sfx_volume"></div>
                <div class="flex1 text-right column-center padding">
                    <input type="range" min="0" max="100" ng-model="options.sfxVolume"/>
                </div>
            </div>

            <div class="flex-row">
                <div class="flex1 text-bold column-center padding" localize="allow_run_background"></div>
                <div class="flex1 text-right column-center padding">
                    <div ng-click="ctrl.toggleAllowRunInBackground()"
                         ng-class="{'active': options.allowRunInBackground }"
                         class="toggle-switch pull-right"><span></span></div>
                </div>
            </div>

            <div class="flex-row">
                <div class="flex1 text-bold column-center padding" localize="developer_mode"></div>
                <div class="flex1 text-right column-center padding">
                    <div ng-click="ctrl.toggleDeveloperMode()" ng-class="{'active': options.developerMode }"
                         class="toggle-switch pull-right"><span></span></div>
                </div>
            </div>

            <div class="flex-row">
                <div class="flex1 text-bold column-center padding" localize="timeformat"></div>
                <div class="flex1 text-right column-center padding">
                    <div dropdown-select="ctrl.timeFormats" dropdown-model="ctrl.timeFormat"
                         dropdown-item-label="name" dropdown-onchange="ctrl.timeFormatChanged(selected)"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<mods class="dialog" ng-if="ctrl.view == 'mods'" style="width: 650px;"></mods>

<div class="dialog" ng-if="ctrl.view == 'eula'">
    <h1>
        End-user License Agreement
        <i class="fa fa-times pull-right close-button" ng-click="ctrl.view = null"></i>
    </h1>
    <div class="padding">
        <iframe src="eula.txt" frameborder="0"
                style="width: 100%;height: 306px;border: 1px solid #c6c8c9;overflow: auto;"></iframe>
    </div>
</div>

<div class="dialog" ng-if="ctrl.view == 'licenses'">
    <h1>
        Licenses
        <i class="fa fa-times pull-right close-button" ng-click="ctrl.view = null"></i>
    </h1>
    <div class="padding">
        <iframe src="licenses.txt" frameborder="0"
                style="width: 100%;height: 306px;border: 1px solid #c6c8c9;overflow: auto;"></iframe>
    </div>
</div>

<div class="dialog" ng-if="ctrl.view == 'credits'">
    <h1>
        Credits
        <i class="fa fa-times pull-right close-button" ng-click="ctrl.view = null"></i>
    </h1>
    <div class="padding text-center" style="padding: 20px 60px; overflow: auto; height: 400px;">
        <div style="margin-bottom: 35px;">
            <div class="dimmed">Development, Design & UI</div>
            Jonas Hovgaard
        </div>
        <div style="margin-bottom: 35px;">
            <div class="dimmed">3D Assets</div>
            Bruno Kenzo
        </div>
        <div style="margin-bottom: 35px;">
            <div class="dimmed">Music</div>
            Steven Settinger
        </div>
        <div style="margin-bottom: 35px;">
            <div class="dimmed">Video Producer</div>
            Alexander Bock
        </div>
        <div style="margin-bottom: 35px;">
            <div class="dimmed">Community Contributors</div>
            Johann Wagner, Jonas Thiem, Vincent Hugon, Paulo Belato, Pablo Pérez, Miguel Antonio, Marcus Böhm,
            Marcel Külper, Loïc Veteau, Camilo Tsumanuma
        </div>
        <div style="margin-bottom: 35px;">
            <div class="dimmed">A special thanks</div>
            My girlfriend Sofie for constantly believing in the project<br><br>
            The community on Twitch and Discord for always keeping me motivated
        </div>
    </div>
</div>


<div id="footer">
    <div style="display: flex; align-items: left; flex-direction: column">
        <a ng-click="ctrl.openGithub()">Bug Reporting</a>
        <a ng-click="ctrl.view = 'licenses'">Licenses</a>
        <a ng-click="ctrl.view = 'eula'">EULA</a>
        <a ng-click="ctrl.view = 'credits'">Credits</a>
    </div>

    <div class="text-center" style="display: flex; align-items: flex-end; justify-content: center;">
        Startup Company Beta {{ BetaVersion }}<br>© Copyright 2017 - Hovgaard Games
    </div>


    <div class="text-right" style="display: flex; justify-content: flex-end; align-items: flex-end;">
        <img ng-click="ctrl.openDiscord()" src="images/discord.png" style="height: 40px;"></div>
</div>
