{#
    Copyright (c) 2012 Mike Green <myatus@gmail.com>

    For the full copyright and license information, please view the LICENSE
    file that was distributed with this source code.
#}

<div style="position: relative; width: 100%;"> {# REL DIV #}
    <form method="post" action="{{ action_url }}" id="cookies_form">
        {{ nonce | raw }}

        <div class="tablenav top hide-if-no-js ">
            <div class="alignleft actions">
                <a href="#" id="add_new_cookie_btn" class="button-secondary action">Add New Cookie</a>
            </div>
            <div class="alignright">
                <span class="displaying-num">{{ known_cookie_count }} cookies</span>
            </div>
        </div>

        <table class="wp-list-table widefat fixed cookie_table">
            <thead>
                <tr>
                    {% if is_rtl %}<th scope="col" class="col_blank">&nbsp;</th>{% endif %}
                    <th scope="col" class="col_name">{{ __('Cookie Name') }}</th>
                    <th scope="col" class="col_desc">{{ __('Description') }}</th>
                    <th scope="col" class="col_group">{{ __('Group') }}</th>
                    <th scope="col" class="col_req">{{ __('Required') }}</th>
                    <th scope="col" class="col_del">{{ __('Remove') }}</th>
                    {% if not is_rtl %}<th scope="col" class="col_blank">&nbsp;</th>{% endif %}
                </tr>
            </thead>
            <tbody>
                <td colspan="6" class="scroll">
                    <div>
                        <table class="widefat" style="border:0;">
                            <tbody>
                                {% for cookie_name,cookie_value in known_cookies %}
                                <tr id="row{{ loop.index }}">
                                    <td class="col_name">
                                        <input type="text" value="{{ cookie_name }}" name="known_cookies[{{ cookie_name }}][name]" placeholder="{{ __('Enter the cookie name here') }}" />
                                    </td>
                                    <td class="col_desc">
                                        <textarea name="known_cookies[{{ cookie_name }}][desc]">{{ cookie_value.desc }}</textarea>
                                        <input type="hidden" name="known_cookies[{{ cookie_name }}][ua]" value="{{ cookie_value.ua }}" />
                                        {% if debug_mode %}
                                        <span class="description">{{ cookie_value.ua }}</span>
                                        {% endif %}
                                    </td>
                                    <td class="col_group">
                                        <div class="hide-if-no-js group-dropdown">
                                            <select>
                                            {% for group in groups %}
                                                <option value="{{ group }}" {% if group == cookie_value.group %}selected="selected"{% endif %}>{{ group }}</option>
                                            {% endfor %}
                                            </select>
                                        </div>
                                        <input class="hide-if-js" type="text" value="{{ cookie_value.group }}" name="known_cookies[{{ cookie_name }}][group]" />
                                        <a href="#" class="edit-group hide-if-no-js add">{{ __('Add new group') }}</a>
                                    </td>
                                    <td class="col_req">
                                        <input type="checkbox" name="known_cookies[{{ cookie_name }}][required]" {% if cookie_value.required %}checked="checked"{% endif %} />
                                    </td>
                                    <td class="col_del">
                                        <input  type="checkbox" class="delete-cb hide-if-js" name="known_cookies[{{ cookie_name }}][delete]" />
                                        <button class="delete-btn button-secondary hide-if-no-js" data-row="row{{ loop.index }}" title="{{ __('Click to remove, save changes to make the removal permanent') }}">{{ __('Remove') }}</button>
                                    </td>
                                </tr>
                                {% endfor %}

                                <tr id="row_clonable" style="display:none">
                                    <td class="col_name">
                                        <input type="text" value="" name="" placeholder="Enter the cookie name here" />
                                    </td>
                                    <td class="col_desc">
                                        <textarea name=""></textarea>
                                    </td>
                                    <td class="col_group">
                                        <div class="hide-if-no-js group-dropdown">
                                            <select>
                                            {% for group in groups %}
                                                <option value="{{ group }}" {% if loop.index == 1 %}selected="selected"{% endif %}>{{ group }}</option>
                                            {% endfor %}
                                            </select>
                                        </div>
                                        <input class="hide-if-js" type="text" value="{{ groups[0] }}" name="" />
                                        <a href="#" class="edit-group hide-if-no-js add">{{ __('Add new group') }}</a>
                                    </td>
                                    <td class="col_req">
                                        <input type="checkbox" name="" />
                                    </td>
                                    <td class="col_del">
                                        <button class="delete-btn button-secondary hide-if-no-js" data-row="" title="{{ __('Click to remove') }}">{{ __('Remove') }}</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tbody>
        </table>

        <div class="alignleft actions" style="margin-top: 30px;">
            {{ submit_button | raw }} <a href="{{ action_url }}" class="button-secondary action">{{ __('Cancel Changes') }}</a>
        </div>

    </form>
</div> {# REL DIV #}