@using CarCareTracker.Helper
@inject IConfigHelper config
@inject ITranslationHelper translator
@model Translations
@{
    var userConfig = config.GetUserConfig(User);
    var userLanguage = userConfig.UserLanguage;
}
<div class="modal-header">
    <h5 class="modal-title" id="translationDownloaderModalLabel">@translator.Translate(userLanguage, "Available Translations")</h5>
    <button type="button" class="btn-close" onclick="hideTranslationDownloader()" aria-label="Close"></button>
</div>
<div class="modal-body" onkeydown="handleEnter(this)">
    <form class="form-inline">
        <div class="form-group" style="max-height:50vh; overflow-x:hidden; overflow-y:scroll;">
            @foreach(var translation in Model.Africa)
            {
                <div class="row mb-2">
                    <div class="col-10">@StaticHelper.GetTranslationName(translation)</div>
                    <div class="col-2">
                        <button type="button" class="btn btn-primary" onclick="downloadTranslation('Africa','@translation')"><i class="bi bi-download"></i></button>
                    </div>
                </div>
            }
            @foreach (var translation in Model.Asia)
            {
                <div class="row mb-2">
                    <div class="col-10">@StaticHelper.GetTranslationName(translation)</div>
                    <div class="col-2">
                        <button type="button" class="btn btn-primary" onclick="downloadTranslation('Asia','@translation')"><i class="bi bi-download"></i></button>
                    </div>
                </div>
            }
            @foreach (var translation in Model.Europe)
            {
                <div class="row mb-2">
                    <div class="col-10">@StaticHelper.GetTranslationName(translation)</div>
                    <div class="col-2">
                        <button type="button" class="btn btn-primary" onclick="downloadTranslation('Europe','@translation')"><i class="bi bi-download"></i></button>
                    </div>
                </div>
            }
            @foreach (var translation in Model.NorthAmerica)
            {
                <div class="row mb-2">
                    <div class="col-10">@StaticHelper.GetTranslationName(translation)</div>
                    <div class="col-2">
                        <button type="button" class="btn btn-primary" onclick="downloadTranslation('NorthAmerica','@translation')"><i class="bi bi-download"></i></button>
                    </div>
                </div>
            }
            @foreach (var translation in Model.SouthAmerica)
            {
                <div class="row mb-2">
                    <div class="col-10">@StaticHelper.GetTranslationName(translation)</div>
                    <div class="col-2">
                        <button type="button" class="btn btn-primary" onclick="downloadTranslation('SouthAmerica','@translation')"><i class="bi bi-download"></i></button>
                    </div>
                </div>
            }
            @foreach (var translation in Model.Oceania)
            {
                <div class="row mb-2">
                    <div class="col-10">@StaticHelper.GetTranslationName(translation)</div>
                    <div class="col-2">
                        <button type="button" class="btn btn-primary" onclick="downloadTranslation('Oceania','@translation')"><i class="bi bi-download"></i></button>
                    </div>
                </div>
            }
        </div>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" onclick="hideTranslationDownloader()">@translator.Translate(userLanguage, "Cancel")</button>
    <button type="button" class="btn btn-primary" onclick="downloadAllTranslations()">@translator.Translate(userLanguage, "Download All Translations")</button>
</div>