<div class="column">
    <h4 class="ui dividing header" style="color:blue;">
        <div class="text iterable_id" style="display:inline-block;" id="destination_title_{{loop.index}}">{{connection.destination.tp | title}} ({{loop.index}})</div>
        <div class="ui dropdown simple">
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item">Change Destination
                    <div class="menu">
                        <div class='item iterable_id' id="destination_powerpoint_{{loop.index}}" onclick='update_source_destination(this.id)'>Powerpoint</div>
                        <div class='item iterable_id' id="destination_slides_{{loop.index}}" onclick='update_source_destination(this.id)'>Slides</div>
                    </div>
                </div>
                <div class='item iterable_id' id="destination_openfile_{{loop.index}}" onclick='open_file(this.id)'>Open File</div>
                <div class="divider"></div>
                <div class="item">Copy
                    <div class="menu">
                        <div class="item iterable_id" id="copy_connection_{{loop.index}}" onclick='copy_connection(this.id)'>Connection</div>
                    </div>
                </div>
                <div class="item">Delete
                    <div class="menu">
                        <div class="item iterable_id" id="delete_connection_{{loop.index}}" onclick='delete_connection(this.id)'>Connection</div>
                    </div>
                </div>
            </div>
        </div>
    </h4>

    <div class="iterable_id" id="destination_{{loop.index}}">
        {% with connection=connection, loop=loop %}
            {% if connection.destination.tp == 'powerpoint' %}
                {% include 'connections/destination/powerpoint.html' %}
            {% else %}
                {% include 'connections/destination/slides.html' %}
            {% endif %}
        {% endwith %}
    </div>
</div>