{% extends "configure/configure.html" %}
{% block configure %}
    <script type="text/javascript">
        $(function (){
            $('#name_input').hide();
        });
        function edit_name(){
            $('#name_label').replaceWith($('#name_input'));
            $('#name_input').show();
        }
    </script>
    
    {# TODO: move to own css file when done #}
    
    <style type="text/css">
        div.plugins {
        }
        
        div.plugin {
            margin-bottom: 0.5em;
            width: 15em;
        }
        
        div.plugin div {
            padding: 0.5em;
        }
        
        div.plugin div.name {
            background: #000;
            color: #fff;
            margin: 0;
        }
        
        div.name span {
            font-weight: bold;
        }
        
        div.name img {
            float: right;
        }
        
        div.plugin div.config {
            background: #0079B2;
            color: #fff;
        }
        
    </style>
    
    <h2 id="name_label">
        {{ name }}
        <img onclick="edit_name()" src="{{ url_for('static', filename='img/fatcow-icons/16x16/script_edit.png') }}" alt="Edit Name">
    </h2>
             
    <h2 id="name_input"><input type="text" name="name" value="{{ name }}" style="font-size: 18px;"></h2>
    
    
    <div class="plugins">
        
        {% for plugin, config in config.iteritems() %}
        
        <div class="plugin input"> {# TODO: type! #}
            <div class="name">
                <span>{{ plugin }}</span>
                <img src="{{ url_for('static', filename='img/fatcow-icons/16x16/delete.png') }}" alt="Delete">
            </div>
            <div class="config">
                {{ config }}
            </div>
        </div>
        
        {% endfor %}
    
        {#
        mocks
    
        <div class="plugin input">
            <div class="name">
                <span>Rss</span>
                <img src="{{ url_for('static', filename='img/fatcow-icons/16x16/delete.png') }}" alt="Delete">
            </div>
            <div class="config">url: http://example.com</div>
        </div>
        
        <div class="plugin filter">
            <div class="name">
                <span>Series</span>
                <img src="{{ url_for('static', filename='img/fatcow-icons/16x16/delete.png') }}" alt="Delete">
            </div>
            <div class="config">
                <ul>
                    <li>Chuck</li>
                    <li>South park</li>
                    <li>How I Met Your Mother</li>
                </ul>
            </div>
        </div>
        #}

   </div>
        
{% endblock %}
