{% include '@dashnex/header.twig' %}
<div class="keyword-planner">
    <header class="dashnex-frame-header">
        <h3 class="pull-left">Keyword Planner</h3>

        <div class="clearfix"></div>
        <div id="error-message-import-export" class="alert alert-danger error hide" role="alert"></div>
        <div id="progress-message" class="alert alert-info info hide" role="alert">
            Importing has started. This can take some time. Please don't reload page.
        </div>
        <div id="success_message" class="alert alert-success updated hide" role="alert"></div>

        <div class="dashnex-frame-actions pull-right">
            <img class="exporting hide" src="{{ asset('dashnex', '/img/small_loading.gif') }}"/>
            {#<button class="btn btn-success {{ groups | length > 0 ? '' : 'hide' }}" id="export-modal-btn">#}
                {#Export All to SM#}
            {#</button>#}
            <button class="btn btn-danger {{ groups | length > 0 ? '' : 'hide' }}" id="delete-all-btn">
                Delete All
            </button>
        </div>
        <div class="dashnex-frame-primary-actions">

            <button id="add-group-btn" class="btn btn-primary">
                Add Group
            </button>
            <button id="add-keywords-btn" class="btn btn-primary {{ groups | length > 0 ? '' : 'hide' }}">
                Add Keywords
            </button>
            <form id="import-form" method="post" target="import" enctype="multipart/form-data" action="">
                <input type="hidden" name="action" value="dashnex-planner-import">
                    <span class="btn btn-primary btn-file"
                         data-original-title="Maximum recommended CSV file size is 70Kb."
                         data-placement="right" data-toggle="tooltip" data-container="body">
                        Import from CSV <input type="file" name="dashnex_adwords_csv" id="dashnex_adwords_csv">

                    </span>
                <img class="loading hide" src="{{ asset('dashnex', '/img/small_loading.gif') }}"/>
            </form>
            <iframe id="import-source" name="import" src=""></iframe>
        </div>

        <div class="clearfix"></div>

        {% include '@dashnex/planner/box/group.twig' %}
        {% include '@dashnex/planner/box/keywords.twig' %}
        {% include '@dashnex/planner/box/keyword.twig' %}

        <div class="clearfix"></div>

        <div class="dashnex-frame-container no-margin">
            <table class="table table-header">
                <tr>
                    <td class="group-name">Group</td>
                    <td class="group-competition-strength">Competition Strength</td>
                    <td class="group-actions"></td>
                    <td class="group-keywords">
                        <table>
                            <tr>
                                <td class="keyword-name">Keywords</td>
                                <td class="keyword-cost">Cost per Click</td>
                                <td class="keyword-traffic">Traffic Volume</td>
                                <td class="keyword-competition-strength">Competition Strength</td>
                                <td class="keyword-actions"></td>
                            </tr>
                        </table>
                    </td>

                </tr>
            </table>
        </div>
    </header>

    <div class="dashnex-frame-container no-margin">
        <table class="table dashnex-planner-table">
            <tbody id="group-table-body">
            {% for group in groups %}
                <tr class="group-row" data-id="{{ group.id }}" init="{{ group.toJsonObject() | json_encode() }}">
                    <td class="group-name">{{ group.name }}</td>
                    <td class="group-competition-strength">{{ group.competitionStrength }}</td>
                    <td class="group-actions">
                        <span class="glyphicon glyphicon-pencil group-edit-btn" data-toggle="tooltip"
                              data-placement="top" title="" data-original-title="Edit Group Name"></span>

                        <span class="glyphicon glyphicon-th-list group-add-keywords-btn" data-toggle="tooltip"
                              data-placement="top" title="" data-original-title="Add Keywords"></span>

                        <span class="glyphicon glyphicon-cloud-upload group-export-modal-btn" data-toggle="tooltip" data-placement="top"
                              title="" data-original-title="Add to Site Manager"></span>

                        <span class="glyphicon glyphicon-search group-get-competition-strength" data-toggle="tooltip"
                              data-placement="top" title="" data-original-title="Get Competition Strength"></span>

                        <span class="loading hide"></span>

                        <span class="glyphicon glyphicon-trash group-delete-modal-btn" data-toggle="tooltip"
                              data-placement="top" title="" data-original-title="Delete Group"></span>
                    </td>
                    <td class="group-keywords">
                        <table class="keywords">
                            {% for keyword in group.keywords %}
                                <tr class="keyword-row" data-id="{{ keyword.id }}">
                                    <td class="keyword-name">{{ keyword.name }}</td>
                                    <td class="keyword-cost">{{ keyword.costPerClick }}</td>
                                    <td class="keyword-volume">{{ keyword.trafficVolume }}</td>
                                    <td class="keyword-competition-strength">{{ keyword.competitionStrength }}</td>
                                    <td class="keyword-actions">
                                        <span class="glyphicon glyphicon-pencil keyword-edit" data-toggle="tooltip"
                                              data-placement="top" title="" data-original-title="Edit Keyword"></span>

                                        <span class="glyphicon glyphicon-search keyword-get-competition-strength" data-toggle="tooltip"
                                              data-placement="top" title="" data-original-title="Get Competition Strength"></span>

                                        <span class="loading hide"></span>

                                        <span class="glyphicon glyphicon-cloud-upload keyword-export-modal-btn"
                                              data-toggle="tooltip" data-placement="top" title=""
                                              data-original-title="Add to Site Manager"></span>

                                        <span class="glyphicon glyphicon-trash keyword-delete-modal-btn"
                                              data-toggle="tooltip" data-placement="top" title=""
                                              data-original-title="Delete Keyword"></span>
                                    </td>
                                </tr>
                            {% endfor %}
                        </table>
                    </td>

                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>


    <table class="hide">
        <tr id="group-row" class="group-row">
            <td class="group-name"></td>
            <td class="group-competition-strength"></td>
            <td class="group-actions">
                <span class="glyphicon glyphicon-pencil group-edit-btn" data-toggle="tooltip" data-placement="top"
                      title="" data-original-title="Edit Group Name"></span>
                <span class="glyphicon glyphicon-th-list group-add-keywords-btn" data-toggle="tooltip"
                      data-placement="top" title="" data-original-title="Add Keywords"></span>
                <span class="glyphicon glyphicon-cloud-upload group-export-modal-btn" data-toggle="tooltip" data-placement="top" title=""
                      data-original-title="Add to Site Manager"></span>
                <span class="glyphicon glyphicon-search group-get-competition-strength" data-toggle="tooltip"
                      data-placement="top" title="" data-original-title="Get Competition Strength"></span>
                <span class="loading hide"></span>
                <span class="glyphicon glyphicon-trash group-delete-modal-btn" data-toggle="tooltip"
                      data-placement="top" title="" data-original-title="Delete Group"></span>
            </td>
            <td class="group-keywords">
                <table class="keywords">
                </table>
            </td>
        </tr>
        <tr id="keyword-row" class="keyword-row">
            <td class="keyword-name"></td>
            <td class="keyword-cost"></td>
            <td class="keyword-volume"></td>
            <td class="keyword-competition-strength"></td>
            <td class="keyword-actions">
                <span class="glyphicon glyphicon-pencil keyword-edit" data-toggle="tooltip"
                      data-placement="top" title="" data-original-title="Edit Keyword"></span>
                <span class="glyphicon glyphicon-search keyword-get-competition-strength" data-toggle="tooltip"
                      data-placement="top" title="" data-original-title="Get Competition Strength"></span>
                <span class="loading hide"></span>
                <span class="glyphicon glyphicon-cloud-upload keyword-export-modal-btn" data-toggle="tooltip"
                      data-placement="top" title="" data-original-title="Add to Site Manager"></span>
                <span class="glyphicon glyphicon-trash keyword-delete-modal-btn" data-toggle="tooltip"
                      data-placement="top" title="" data-original-title="Delete Keyword"></span>
            </td>
        </tr>
    </table>

    <div class="dashnex-frame-popover">
        <div class="dashnex-frame-popover-arrow"></div>
        <h3 class="dashnex-frame-popover-title">Help</h3>

        <div class="dashnex-frame-popover-content">
            <p><a id="show-support-modal-btn" href="#">I need to email support.</a></p>

            <p><a id="show-keyword-planner-modal-btn" href="#">How to use Keyword Planner</a></p>
        </div>
    </div>


    {% include '@dashnex/planner/modal/csv-help.twig' %}
    {% include '@dashnex/planner/modal/delete-all.twig' %}
    {% include '@dashnex/planner/modal/delete-group.twig' %}
    {% include '@dashnex/planner/modal/delete-keyword.twig' %}
    {% include '@dashnex/planner/modal/group-export.twig' %}
    {% include '@dashnex/planner/modal/keyword-export.twig' %}
    {% include '@dashnex/planner/modal/export-all.twig' %}
    {% include '@dashnex/modal/support.twig' %}
</div>