@page "/desktop"
@*@page "/desktop/{docID:int}"*@
@attribute [Authorize]

<div class="blocks">
    <div class="first-block">
        <div class="top__block">
            <div class="header-block header-block_first">
                <div class="header-block__text">Календарь событий</div>
                <div class="header-block__span">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div class="slider">
                <div class="slider__item">
                    Тема: Цифровой двойник синтеза метанола <br>
                    Организатор: ООО«ПроК» <br>
                    Дата проведения: с 1 дек. по 30 дек. 2021 года <br>
                    Формат: Цифровой хакатон <br>
                    Статус: Открыта регистрация <br>
                    ID: Dh001<br>
                </div>
                <div class="slider__item">
                    Тема: Цифровой двойник синтеза метанола <br>
                    Организатор: ООО«ПроК» <br>
                    Дата проведения: с 1 дек. по 30 дек. 2021 года <br>
                    Формат: Цифровой хакатон <br>
                    Статус: Открыта регистрация <br>
                    ID: Dh001<br>
                </div>
            </div>
            <div class="footer-block">
                <div class="footer-block__left__button">
                    <img src="img/left_button.svg" alt="">
                    <p>Влево</p>
                </div>
                <div class="footer-block__right__button">
                    <p>Вправо</p>
                    <img src="img/right_button.svg" alt="">
                </div>
            </div>
        </div>
        <div class="bottom__block">
            <div class="first-block__inforamtion__box">
                <div class="header-block header-block_first">
                    <div class="header-block__text">Описание мероприятия</div>
                    <div class="header-block__span">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class="first-block__inforamtion">
                    <p>
                        Цели хакатона <a class="first-block__inforamtion__item" href="">Почитать про формат</a><br>
                        Создание экспертного сообщества по теме разработки математической модели<br>
                    </p>
                    <p>Создание библиотеки знаний <a class="first-block__inforamtion__item" href="">Посмотреть библиотеку</a> по синтезу метанола в нефтехимической промышленности</p>
                    <p>Обучение работы с цифровыми решениями 2DH: <br>-с большими массивами данных и информации<br>-извлечения ценных знаний из неструктурированных данных и информации</p>
                    <a class="first-block__inforamtion__item" href="">Почитать правила</a>
                    <p>
                        Бюджет: 1 200 2dh <br>
                        Рейтинг прохождения: +250mmr
                    </p>
                    <p>Зарегистрировалось 24 пользователя</p>
                </div>
            </div>
            <div class="first-block__inforamtion__button">
                <button class="btn_grey" @onclick="RequestParticipation">Подать заявку</button>
                <button class="btn_grey">Сохранить</button>
                <button class="btn_grey">Поделиться</button>
            </div>
        </div>
    </div>
    <div class="second-block">
        <div class="header-block header-block_second">
            <div class="header-block__text">Рабочий стол</div>
            <div class="header-block__span" @onclick="@(() => WidgetMenuClick(".block__dropbox", "desktop_menu"))">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="block__dropbox" id="desktop_menu">
            <p class="block__dropbox__header__text">Выбрать действие</p>
            <a class="block__dropbox__search" style="cursor:pointer" @onclick="NewDocument">Новый документ</a>
        </div>
        <div class="second-block__button">
            <button class=@_uploadButtonClass @onclick="(() => SwitchDesktopTab(0))" disabled=@loadButtonDisable>Загрузка</button>
            <button class=@_verifyButtonClass @onclick="(() => SwitchDesktopTab(1))" disabled=@verifyButtonDisable>Верифицировать</button>
            <button class=@_otherButtonClass @onclick="(() => SwitchDesktopTab(2))">Другое</button>
        </div>
        <div class=@_uploadTabClass>
            <EditForm Model="@_article">
                <p>Загрузка материала</p>
                <label class="upload__label">
                    <select class="form-control upload__input">
                        <option value="">Выберете мероприятие</option>
                        <option selected value="hackathon22_01">Хакатон 2022</option>
                    </select>
                </label>
                <div class="second-block__input__file__label__box">
                    <InputFile class="second-block__input__file" id="input_file" OnChange="@HandleUpload"
                               accept="application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document,
                                    text/html, text/plain, application/rtf" />
                    <label for="input_file" class="second-block__input__file__label" id="file_label">
                        <span>+</span>
                        <p>Прикрепить файл</p>
                    </label>
                    @*@_article.Filename*@
                </div>
                <div class="upload__input-descr">Status: @_status</div>
                <label class="upload__label">
                    <InputText type="text" placeholder="Наименование статьи" class="form-control upload__input" @bind-Value="_article.Name" />
                </label>
                <label class="upload__label">
                    <InputDate type="date" placeholder="Дата издания" class="form-control upload__input" @bind-Value="_article.PublishDate" />
                </label>
                <label class="upload__label">
                    <InputText type="text" placeholder="Автор" class="form-control upload__input" @bind-Value="_article.Authors" />
                    <div class="upload__input-descr">+ Добавить автора. Указывать имена авторов через запятую</div>
                </label>
                <label class="upload__label">
                    <InputTextArea placeholder="Аннотация" class="form-control upload__textarea" @bind-Value="_article.Annotation" />
                </label>                
                <label class="upload__label">
                    <InputText type="text" placeholder="Ключевые слова" class="form-control upload__input" @bind-Value="_article.Keywords" />
                </label>
                <div class="second-block__form__button">
                    <button class="btn_grey" @onclick="SendToVerify_OnClick">Отправить на верификацию</button>
                    <button class="btn_grey" @onclick="(() => SaveDocument_OnClick(Models.ArticleStatus.Saved))">Сохранить</button>
                </div>
            </EditForm>
        </div>
        <div class=@_verifyTabClass>
            <p>Валидация материала</p>
            <label class="upload__label upload__label_mb">
                <select class="form-control upload__input" @onchange="DocSelect_OnChange">
                    <option value="">Выберите материал</option>
                    @foreach (var article in AppData.Articles)
                    {
                        if (article.Value.ID == _article.ID)
                            _articleDropdownOption = $"<option selected value={article.Value.ID}>{article.Value.Name}</option>";

                        else
                            _articleDropdownOption = $"<option value={article.Value.ID}>{article.Value.Name}</option>";

                        @((MarkupString)_articleDropdownOption)
                    }
                </select>
            </label>
            @if (_article.Status != Models.ArticleStatus.New)
            {
                <p>Файлы документа</p>
                <div class="upload__input-descr">Исходный файл: <a style="cursor:pointer; color:blue;" @onclick="@(() => GetArticleFile("source"))">@_article.FilenameReal</a></div>
                <div class="upload__input-descr" style="margin-bottom:20px">
                    Преобразованный файл:
                    <a style="cursor:pointer; color:blue;" @onclick="@(() => GetArticleFile("html"))">
                        @($"{_article.FilenameReal}.html")
                    </a>
                </div>
            }
            <input type="checkbox" class="checkbox__input" id="radio" @bind="@_verificationPoint.RulesViolation">
            <label class="сheckbox__label" for="radio">
                Материал сформирован не по правилам
            </label>
            <input type="checkbox" class="checkbox__input" id="radio2" @bind="@_verificationPoint.NonExpert">
            <label class="сheckbox__label" for="radio2">
                Не являюсь экспертом в этой теме
            </label>
            <input type="checkbox" class="checkbox__input" id="radio3" @bind="@_verificationPoint.AdditionalVerificationRequired">
            <label class="сheckbox__label" for="radio3">
                Требуется дополнительная экспертиза
            </label>
            <input type="checkbox" class="checkbox__input" id="radio5" @bind="@_verificationPoint.Rejected">
            <label class="сheckbox__label" for="radio5">
                Отклонить, указать причину
            </label>
            <label class="upload__label">
                <textarea placeholder="Причина" class="form-control upload__textarea" @bind="@_verificationPoint.RejectReason" disabled=@rejectReasonDisable></textarea>
            </label>
            <label class="upload__label">
                <textarea placeholder="Теги" class="form-control upload__textarea" @bind="@_verificationPoint.Tags"></textarea>
            </label>
            <div class="second-block__form__button">
                <button class="btn_grey" @onclick="Verify_OnClick">Валидация</button>
                <button class="btn_grey" @onclick="(() => SaveDocument_OnClick(Models.ArticleStatus.Verifying))">Сохранить</button>
            </div>
        </div>
        <div class=@_otherTabClass>
            <p style="margin-bottom:20px;">Файлы документа</p>
            @if (_article.Status != Models.ArticleStatus.New)
            {
                <div class="upload__input-descr">Исходный файл: <a style="cursor:pointer; color:blue;" @onclick="@(() => GetArticleFile("source"))">@_article.FilenameReal</a></div>
                <div class="upload__input-descr">Преобразованный файл: <a style="cursor:pointer; color:blue;" @onclick="@(() => GetArticleFile("html"))">@($"{_article.FilenameReal}.html")</a></div>
            }
        </div>
    </div>
    <div class="third-block">
        <div class="header-block header-block_third">
            <div class="header-block__text">Библиотека</div>
            <div class="header-block__span" @onclick="@(() => WidgetMenuClick(".block__dropbox", "library_menu"))">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="block__dropbox" id="library_menu">
            <p class="block__dropbox__header__text">Сортировка</p>
            <p class="block__dropbox__search">Выбрать</p>
            <select name="" id="" class="block__dropbox__select">
                <option value="Верифицированные">Верифицированные</option>
                <option value="На верификации">На верификации</option>
                <option value="Отклоненные">Отклоненные</option>
            </select>
            <label for="" class="block__dropbox__search">
                Найти по номеру
                <input type="text">
            </label>
            <label for="" class="block__dropbox__search">
                Найти по мероприятию
                <input type="text">
            </label>
            <label for="" class="block__dropbox__search"></label>
        </div>
        <div class="third-block__info">
            <ul class="third-block__info__ul" style="cursor:pointer">
                @foreach (var article in _articles)
                {
                    <li class="third-block__info__li" @onclick="(() => LoadDocument(article.Value.ID))">@(article.Key) | @article.Value.Name<br>@GetDisplayName(article.Value.Status)</li>
                }
            </ul>
        </div>
    </div>

    <ModalInfo @ref="_modalInfo">
        <Title>Информация</Title>
        <Body>
        </Body>
    </ModalInfo>
    <ModalLoading @ref="_modalLoading">
        <Body>
        </Body>
    </ModalLoading>
    <ModalSurvey @ref="_modalSurvey">
        <Title></Title>
    </ModalSurvey>
</div>

@if (_article?.ID > 0 || _article?.NounGroups?.Length > 0)
{
    <div>
        Название: @_article.Name
        .
    </div>
    <div>
        Дата: @_article.PublishDate        
    </div>
    <div>
        Автор: @_article.Authors
    </div>
    <div>
        Аннотация: @_article.Annotation
        .
    </div>
    <div>
        Ключевые слова: @_article.Keywords
        .
    </div>
    <div style="margin-left:10px ; margin-top: 10px">
        <p>Имя файла: @_report.FileName</p>
        <p>Размер: @_report.FileSize байт</p>
        <p>Формат: @_report.FileFormat</p>

        <Collapsible LabelText="Noun groups:"
                     Collapsed="true">
            <ChildContent>
                <div style="margin-left:50px">
                    <Collapsible LabelText="Grouped&Sorted"
                                 Collapsed="true">
                        <ChildContent>
                            @((MarkupString)_report.NounGroupsSorted)
                        </ChildContent>
                    </Collapsible>
                </div>
                @((MarkupString)_article.NounGroups)
            </ChildContent>
        </Collapsible>

        <Collapsible LabelText="Entities:"
                     Collapsed="true">
            <ChildContent>
                @((MarkupString)_article.Entities)
            </ChildContent>
        </Collapsible>

        <Collapsible LabelText="Morph:"
                     Collapsed="true">
            <ChildContent>
                @((MarkupString)_article.Morph)
            </ChildContent>
        </Collapsible>

        <Collapsible LabelText="Keywords1:"
                     Collapsed="true">
            <ChildContent>
                @((MarkupString)_article.Keywords1)
            </ChildContent>
        </Collapsible>

        <Collapsible LabelText="Keywords2:"
                     Collapsed="true">
            <ChildContent>
                @((MarkupString)_article.Keywords2)
            </ChildContent>
        </Collapsible>
    </div>
}