{% extends "base.jinja2" %}

{% block content %}
    <div class="row">
        <div class="col-md-12">

            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Основная информация</h3>
                </div>
                <div class="box-body">
                    <div class="form-group">
                        <label for="game_name">Название игры</label>
                        <input id="game_name" name="game_name" class="form-control" type="text" value="{{ extended_game.game.name }}" />
                    </div>
                    <div class="form-group">
                        <label for="platform-select-multiple">Платформы</label>
                        <select id="platform-select-multiple"
                                class="form-control platform-select-multiple"
                                name="platform_ids"
                                multiple="multiple"
                                values="{{ extended_game.platforms | map(attribute='platform') | map(attribute='id') | join(',') }}">
                            {% for extended_platform in extended_platforms %}
                            <option value="{{ extended_platform.platform.id }}">{{ extended_platform.platform.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="game_description">Описание</label>
                        <textarea id="game_description" name="game_description" class="form-control">{{ extended_game.game.description }}</textarea>
                    </div>
                    <div class="form-group">
                        <label for="main-image">Основное изображение</label>
                        <input id="main-image" name="main_image" type="file" />
                    </div>
                    <div class="form-group">
                        <label for="chat-image">Изображение канала в общем чате</label>
                        <input id="chat-image" name="chat_image" type="file" />
                    </div>
                </div>
            </div>
        </div>
        <div id="services-box" class="col-md-12"></div>

        <div class="col-md-12">
            <button type="submit" class="btn btn-primary add_service">
                <i class="fa fa-plus"></i> Добавить услугу
            </button>

            <a href="{{ url('content.shop.games.manage') }}" class="btn btn-default pull-right">Отменить</a>
            <button type="submit" class="btn btn-primary pull-right game_submit">Создать</button>
        </div>
    </div>

    <script>
    const gameOptionValueTemplate = () => `
        <div class="">
            <div class="col-md-11 form-group">
                <input type="text" name="option_values" class="form-control option-values" />
            </div>
            <div class="col-md-1">
                <button class="btn btn-danger pull-right delete-game-option-value"><i class="fa fa-remove"></i></button>
            </div>
        </div>
    `;

    const gameOptionTemplate = () => `
        <div class="box">
            <div class="box-body">
                <div class="form-group">
                    <label>Название опции</label>
                    <input type="text" name="option_name" class="form-control option-name" />
                </div>
                <div class="form-group">
                    <label>Возможные значения</label>
                    <div class="game-option-values"></div>
                </div>
            </div>
            <div class="box-footer">
                <button class="btn btn-primary add-game-option-value"><i class="fa fa-plus"></i> Добавить значение</button>
                <button class="btn btn-danger delete-game-option"><i class="fa fa-plus"></i> Удалить опцию</button>
            </div>
        </div>
    `;

    const serviceTemplate = () => `
        <div class="box service-box">
            <div class="box-body">
                <div class="form-group">
                    <label>Услуга</label>
                    <select class="form-control service-id" name="service_id">
                        {% for extended_service in extended_services %}
                        <option value={{ extended_service.service.id }}>{{ extended_service.full_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label>Единица стоимости (placeholder)</label>
                    <input type="text" class="form-control price-unit-placeholder" name="price_unit_placeholder" />
                </div>
                <div class="form-group">
                    <label>Название формы</label>
                    <input type="text" class="form-control advanced-form-name" name="advanced_form_name" value="default.jinja2" />
                </div>
                <div class="form-group">
                    <label>Опции доставки</label>
                    <select class="form-control delivery-option-select-multiple" name="delivery_option_ids" multiple="multiple">
                        {% for delivery_option in delivery_options %}
                        <option value="{{ delivery_option.id }}">{{ delivery_option.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label>Опции игры</label>
                    <div class="game-options"></div>
                </div>
            </div>
            <div class="box-footer">
                <button class="btn btn-primary add-game-option"><i class="fa fa-plus"></i> Добавить опцию</button>
                <button class="btn btn-danger delete-service"><i class="fa fa-remove"></i> Удалить услугу</button>
            </div>
        </div>
    `;
    </script>

    {{ '/assets/select2/dist/js/select2.full.js' | append(js_imports) }}
    {{ '/js/shop/content/game.js' | append(js_imports) }}
{% endblock %}