{% extends "base.html" %}

{% block title %}테마 관리{% endblock title %}
{% block subtitle %}테마 목록{% endblock subtitle %}

{% block content %}
    <ul id="theme_list">
        {% for theme in theme_list %}
        {% set info = get_theme_info(theme) %}
        <li>
            <div class="tmli_if">
            {% if info.screenshot %}
                <img src="{{ info.screenshot }}" alt="{{ info.theme_name }}">
            {% else %}
                <img src="/static/admin/img/theme_img.jpg" alt="">
            {% endif %}
                <div class="tmli_tit">
                    <p>{{ info.theme_name }}</p>
                </div>
            </div>
            {% if config.cf_theme == info.theme_dir %}
                <span class="theme_sl theme_sl_use">사용중</span>
                <!-- <button type="button" class="theme_sl theme_deactive" data-theme="{{ info.theme_dir }}" data-name="{{ info.theme_name }}">사용안함</button> -->
            {% else %}    
                <button type="button" class="theme_sl theme_active" data-theme="{{ info.theme_dir }}" data-name="{{ info.theme_name }}" data-set_default_skin="">테마 적용</button>
            {% endif %}
            <!-- <a href="/admin/theme_preview?theme={{ info.theme_dir }}" class="theme_pr" target="theme_preview">미리보기</a> -->
            <button type="button" class="tmli_dt theme_detail" data-theme="{{ info.theme_dir }}">상세보기</button>
        </li>
        {% else %}
            <p class="no_theme">설치된 테마가 없습니다.</p>
        {% endfor %}
    </ul>

    <script>
    $(function() {
        $(".theme_active").on("click", function() {
            var theme = $(this).data("theme");
            var name  = $(this).data("name");

            if(!confirm(name + " 테마를 적용하시겠습니까?"))
                return false;

            var set_default_skin = 0;
            if($(this).data("set_default_skin") == true) {
                if(confirm("기본환경설정, 1:1문의, 쇼핑몰 스킨을 테마에서 설정된 스킨으로 변경하시겠습니까?\n\n변경을 선택하시면 테마에서 지정된 스킨으로 회원스킨 등이 변경됩니다."))
                    set_default_skin = 1;
            }

            $.ajax({
                type: "POST",
                url: "/admin/theme_update",
                data: {
                    "theme": theme,
                    "set_default_skin": set_default_skin
                },
                cache: false,
                success: function(response) {
                    if(response.error) {
                        alert(response.error);
                        return false;
                    }
            
                    if(response.success) {
                        alert(response.success);
                        document.location.reload();
                    }
                }
            });
        });

        $(".theme_deactive").on("click", function() {
            var theme = $(this).data("theme");
            var name  = $(this).data("name");

            if(!confirm(name + " 테마 사용설정을 해제하시겠습니까?\n\n테마 설정을 해제하셔도 게시판 등의 스킨은 변경되지 않으므로 개별 변경작업이 필요합니다."))
                return false;

            $.ajax({
                type: "POST",
                url: "/admin/theme_update",
                data: {
                    "theme": theme,
                    "type": "reset"
                },
                cache: false,
                async: false,
                success: function(data) {
                    if(data) {
                        alert(data);
                        return false;
                    }

                    document.location.reload();
                }
            });
        });

        $(".theme_detail").on("click", function() {
            var theme = $(this).data("theme");

            $("#theme_detail").remove();

            $.ajax({
                type: "POST",
                url: "/admin/theme_detail",
                contentType: 'application/x-www-form-urlencoded',
                data: {
                    "theme": theme
                },
                cache: false,
                async: false,
                success: function(data) {
                    $("#theme_list").after(data);
                }
            });
        });
    });    
    </script>
{% endblock content %}