{% extends 'base.html' %}

{% block title %}settings{% endblock %}

{% block head %}
    <style>
    .collapse h4 {line-height: 55px;}
    </style>
{% endblock %}

{% block body %}
<h2>
    <a class="link" target="_blank" href="{{ GITHUB_URL }}/blob/master/scrapydweb/default_settings.py">
    Settings
    </a>
</h2>

<div class="wrap collapse-wrap">
    <ul class="collapse">
        <li>
            <div class="title">
                <h4>default_settings.py</h4>
                <i class="iconfont icon-right"></i>
            </div>
            <p>{{ default_settings_py }}</p>
        </li>
        <li>
            <div class="title">
                <h4>user settings</h4>
                <i class="iconfont icon-right"></i>
            </div>
            <p>{{ scrapydweb_settings_py_path }}</p>
        </li>
    </ul>
</div>

<div class="wrap collapse-wrap">
    <!-- <h3>Settings</h3> -->
    <ul class="collapse">

        <div class="wrap collapse-wrap">
            <h3 style="color: #409EFF;">ScrapydWeb</h3>
            <ul class="collapse">
                <li>
                    <div class="title">
                        <h4>main_pid: {{ main_pid }}</h4>
                    </div>
                </li>
                <li>
                    <div class="title">
                        <h4>caching_pid: {{ caching_pid }}</h4>
                    </div>
                </li>
                <li>
                    <div class="title">
                        <h4>* server *</h4>
                        <i class="iconfont icon-right"></i>
                    </div>
                    <pre>{{ scrapydweb_server }}</pre>
                </li>
            </ul>
        </div>

        <div class="wrap collapse-wrap">
            <h3 style="color: #409EFF;">Scrapy</h3>
            <ul class="collapse">
                <li>
                    <div class="title">
                        <h4>SCRAPY_PROJECTS_DIR</h4>
                        <i class="iconfont icon-right"></i>
                    </div>
                    <pre>{{ SCRAPY_PROJECTS_DIR }}</pre>
                </li>
            </ul>
        </div>

        <div class="wrap collapse-wrap">
            <h3 style="color: #409EFF;">Scrapyd</h3>
            <ul class="collapse">
                <li>
                    <div class="title">
                        <h4>* servers *</h4>
                        <i class="iconfont icon-right"></i>
                    </div>
                    <pre>{{ servers }}</pre>
                </li>
                <li>
                    <div class="title">
                        <h4>SCRAPYD_LOGS_DIR</h4>
                        <i class="iconfont icon-right"></i>
                    </div>
                    <pre>{{ SCRAPYD_LOGS_DIR }}</pre>
                </li>
                <li>
                    <div class="title">
                        <h4>SCRAPYD_LOG_EXTENSIONS</h4>
                        <i class="iconfont icon-right"></i>
                    </div>
                    <pre>{{ SCRAPYD_LOG_EXTENSIONS }}</pre>
                </li>
            </ul>
        </div>

        <div class="wrap collapse-wrap">
            <h3 style="color: #409EFF;">Page Display</h3>
            <ul class="collapse">
                <li>
                    <div class="title">
                        <h4>details</h4>
                        <i class="iconfont icon-right"></i>
                    </div>
                    <pre>{{ page_display_details }}</pre>
                </li>
            </ul>
        </div>

        <div class="wrap collapse-wrap">
            <h3 style="color: #409EFF;">HTML Caching </h3>
            <ul class="collapse">
                <li>
                    <div class="title">
                        <h4>ENABLE_CACHE = {{ ENABLE_CACHE }}</h4>
                    </div>
                </li>
            {% if ENABLE_CACHE %}
                <li>
                    <div class="title">
                        <h4>details</h4>
                        <i class="iconfont icon-right"></i>
                    </div>
                    <pre>{{ html_caching_details }}</pre>
                </li>
            {% endif %}
            </ul>
        </div>


        <div class="wrap collapse-wrap">
            <h3 style="color: #409EFF;">Email Notice</h3>
            <ul class="collapse">
                <li>
                    <div class="title">
                        <h4>ENABLE_EMAIL = {{ ENABLE_EMAIL }}</h4>
                    </div>
                </li>
            {% if ENABLE_EMAIL %}
                <li>
                    <div class="title">
                        <h4>smtp settings</h4>
                        <i class="iconfont icon-right"></i>
                    </div>
                    <pre>{{ smtp_settings }}</pre>
                </li>
                <li>
                    <div class="title">
                        <h4>* sender & recipients *</h4>
                        <i class="iconfont icon-right"></i>
                    </div>
                    <pre>{{ sender_recipients }}</pre>
                </li>
                <li>
                    <div class="title">
                        <h4>email working time</h4>
                        <i class="iconfont icon-right"></i>
                    </div>
                    <pre>{{ email_working_time }}</pre>
                </li>
                <li>
                    <div class="title">
                        <h4>email triggers</h4>
                        <i class="iconfont icon-right"></i>
                    </div>
                    <pre>{{ email_triggers|safe }}</pre>
                </li>
            {% endif %}
            </ul>
        </div>

        <div class="wrap collapse-wrap">
            <h3 style="color: #409EFF;">System</h3>
            <ul class="collapse">
                <li>
                    <div class="title">
                        <h4>DEBUG = {{ DEBUG }}</h4>
                    </div>
                </li>
                <li>
                    <div class="title">
                        <h4>VERBOSE = {{ VERBOSE }}</h4>
                    </div>
                </li>
            </ul>
        </div>

    </ul>
</div>

<script>
// handle collapse components
(function () {
    var collapse = my$('.collapse');
    var titles = my$$('.collapse .title');
    var lis = my$$('.collapse li');
    titles.forEach(function(title) {
        title.addEventListener('click', function(e){
            var index = [].indexOf.call(titles, this);
            lis[index].classList.toggle('active');
        });
    });
})();
</script>
{% endblock %}
