<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4 mb-4">
	<div class="info mt-4">
        {% if conf_data['listen_port'] == "" and conf_data['status'] == "stopped" %}
            <div class="alert alert-warning" role="alert">Peer QR Code and configuration file download required a specified <strong>Listen Port</strong>.</div>
        {% endif %}
        {% if conf_data['conf_address'] == "N/A" %}
            <div class="alert alert-warning" role="alert">
                Configuration <strong>Address</strong> not be specified to have peer connect to it.
            </div>
        {% endif %}
		<div class="row">
			<div class="col">
				<small class="text-muted"><strong>CONFIGURATION</strong></small>
				<h1 class="mb-3"><samp>{{conf_data['name']}}</samp></h1>
			</div>
			<div class="col">
				<small class="text-muted"><strong>ACTION</strong></small><br>
                {% if conf_data['checked'] == "checked" %}
                    <a href="#" id="{{conf_data['name']}}" {{conf_data['checked']}} class="switch text-primary"><i class="bi bi-toggle2-on"></i> ON</a>
                {% else %}
                    <a href="#" id="{{conf_data['name']}}" {{conf_data['checked']}} class="switch text-secondary"><i class="bi bi-toggle2-off"></i> OFF</a>
                {% endif %}
                <div class="spinner-border text-primary" role="status" style="display: none; margin-top: 10px">
                    <span class="sr-only">Loading...</span>
                </div>
			</div>
			<div class="w-100"></div>
			<div class="col">
				<small class="text-muted"><strong>STATUS</strong></small>
				<h6 style="text-transform: uppercase;">{{conf_data['status']}}<span class="dot dot-{{conf_data['status']}}"></span></h6>
			</div>
			<div class="col">
				<small class="text-muted"><strong>CONNECTED PEERS</strong></small>
				<h6 style="text-transform: uppercase;">{{conf_data['running_peer']}}</h6>
			</div>
			<div class="col-sm">
				<small class="text-muted"><strong>TOTAL DATA USAGE</strong></small>
				<h6 style="text-transform: uppercase;">{{conf_data['total_data_usage'][0]}} GB</h6>
			</div>
			<div class="col-sm">
				<small class="text-muted"><strong>TOTAL RECEIVED</strong></small>
				<h6 style="text-transform: uppercase;">{{conf_data['total_data_usage'][1]}} GB</h6>
			</div>
			<div class="col-sm">
				<small class="text-muted"><strong>TOTAL SENT</strong></small>
				<h6 style="text-transform: uppercase;">{{conf_data['total_data_usage'][2]}} GB</h6>
			</div>
			<div class="w-100"></div>
			<div class="col-sm">
				<small class="text-muted">
                    <strong>PUBLIC KEY</strong>
                    <strong style="margin-left: auto!important; opacity: 0; transition: 0.2s ease-in-out" class="text-primary">CLICK TO COPY</strong>
                </small>
				<h6><samp class="key">{{conf_data['public_key']}}</samp></h6>
			</div>
			<div class="col-sm">
				<small class="text-muted"><strong>LISTEN PORT</strong></small>
				<h6 style="text-transform: uppercase;"><samp>
                    {% if conf_data['listen_port'] == "" %}
                        N/A
                    {% else %}
                        {{conf_data['listen_port']}}
                    {% endif %}
                </samp></h6>
			</div>
            <div class="col-sm">
				<small class="text-muted"><strong>ADDRESS</strong></small>
				<h6 style="text-transform: uppercase;"><samp>{{conf_data['conf_address']}}</samp></h6>
			</div>
		</div>
		<hr>
		<div class="button-div mb-3">
            <div class="row">
                <div class="col-sm">
                     <div class="form-group">
                        <label for="sort_by_dropdown"><small class="text-muted">Sort Peers By</small></label>
                        <select class="form-control" id="sort_by_dropdown">
                            <option value="status" {% if sort_tag == "status" %} {{ "selected" }} {% endif %}>Status</option>
                            <option value="name" {% if sort_tag == "name" %} {{ "selected" }} {% endif %}>Name</option>
                            <option value="allowed_ip" {% if sort_tag == "allowed_ip" %} {{ "selected" }} {% endif %}>Allowed IP</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm">
                    <div class="form-group">
                        <label><small class="text-muted">Refresh Interval</small></label><br>
                        <div class="btn-group" role="group" style="width: 100%">
                            <button style="width: 20%" type="button" class="btn btn-outline-primary btn-group-label refresh"><i class="bi bi-arrow-repeat"></i></button>
                            <button style="width: 20%" type="button" class="btn btn-outline-primary update_interval {% if dashboard_refresh_interval == 5000 %} {{ "active" }} {% endif %}" refresh-interval="5000">5s</button>
                            <button style="width: 20%" type="button" class="btn btn-outline-primary update_interval {% if dashboard_refresh_interval == 10000 %} {{ "active" }} {% endif %}" refresh-interval="10000">10s</button>
                            <button style="width: 20%" type="button" class="btn btn-outline-primary update_interval {% if dashboard_refresh_interval == 30000 %} {{ "active" }} {% endif %}" refresh-interval="30000">30s</button>
                            <button style="width: 20%" type="button" class="btn btn-outline-primary update_interval {% if dashboard_refresh_interval == 60000 %} {{ "active" }} {% endif %}" refresh-interval="60000">1m</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm">
                    <div class="form-group">
                        <label><small class="text-muted">Display Mode</small></label><br>
                        <div class="btn-group" role="group" style="width: 100%">
                            <button style="width: 20%" type="button" class="btn btn-outline-primary display_mode {% if peer_display_mode == "grid" %} {{ "active" }} {% endif %}" display-mode="grid"><i class="bi bi-grid-fill" style="font-size: 1.5rem;"></i></button>
                            <button style="width: 20%" type="button" class="btn btn-outline-primary display_mode {% if peer_display_mode == "list" %} {{ "active" }} {% endif %}" display-mode="list"><i class="bi bi-list" style="font-size: 1.5rem;"></i></button>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-primary add_btn" data-toggle="modal" data-target="#add_modal">
                    <i class="bi bi-plus-circle-fill" style=""></i> Add Peer
                </button>
            </div>
		</div>
	</div>

    <div class="row peer_list">
        {% if conf_data['peer_data']|length == 0 %}
            <div class="col-12" style="text-align: center; margin-top: 1.5rem"><h3 class="text-muted">Oops! No peers found ‘︿’</h3></div>
        {% endif %}

        {% for i in conf_data['peer_data']%}
            {% if peer_display_mode == "list" %}
                <div class="col-12">
            {% else %}
                <div class="col-sm-6 col-lg-4">
            {% endif %}
            <div class="card mb-3 card-{{i['status']}}">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm">
                            <h4>
                                {% if not i['name']%}
                                    {{ "Untitled" }}
                                {% else %}
                                    {{i['name']}}
                                {% endif %}
                            </h4>
                        </div>
                        <div class="w-100"></div>
                        <div class="col-6">
                            <small class="text-muted"><strong>STATUS</strong></small>
                            <h6 style="text-transform: uppercase;" class="mb-2 h6-dot-{{i['status']}}"><span class="dot dot-{{i['status']}}" style="margin-left: 0 !important;margin-top: 5px"></span></h6>
                        </div>
                        <div class="col-6 peer_data_group" style="text-align: right">
                            <small class="text-muted"><strong>TRANSFER</strong></small>
                            <p class="text-primary" style="text-transform: uppercase; margin-bottom: 0;"><small><i class="bi bi-arrow-down-right"></i> {{i['total_receive']}} GB</small></p>
                            <p class="text-success" style="text-transform: uppercase; margin-bottom: 0"><small><i class="bi bi-arrow-up-right"></i> {{i['total_sent']}} GB</small></p>
                        </div>
                        <div class="col-sm">
                            <small class="text-muted" style="display: flex">
                                <strong>PEER</strong>
                                <strong style="margin-left: auto!important; opacity: 0; transition: 0.2s ease-in-out" class="text-primary">CLICK TO COPY</strong></small>
                            <h6><samp class="ml-auto key">{{i['id']}}</samp></h6>
                        </div>
                        <div class="col-sm">
                            <small class="text-muted"><strong>ALLOWED IP</strong></small>
                            <h6 style="text-transform: uppercase;">{{i['allowed_ip']}}</h6>
                        </div>
                        <div class="col-sm">
                            <small class="text-muted"><strong>LATEST HANDSHAKE</strong></small>
                            <h6 style="text-transform: uppercase;">{{i['latest_handshake']}}</h6>
                        </div>
                        <div class="w-100"></div>
                        <div class="col-sm">
                            <small class="text-muted"><strong>END POINT</strong></small>
                            <h6 style="text-transform: uppercase;">{{i['endpoint']}}</h6>
                        </div>
                        <div class="w-100"></div>
                        <div class="col-sm"><hr><div class="button-group" style="display:flex"><button type="button" class="btn btn-outline-primary btn-setting-peer btn-control" id="{{i['id']}}" data-toggle="modal"><i class="bi bi-gear-fill"></i></button><button type="button" class="btn btn-outline-danger btn-delete-peer btn-control" id="{{i['id']}}" data-toggle="modal"><i class="bi bi-x-circle-fill"></i></button>
                                {% if i['private_key'] %}
                                    <div class="share_peer_btn_group" style="margin-left: auto !important; display: inline">
                                        <button type="button" class="btn btn-outline-success btn-qrcode-peer btn-control" img_src="/qrcode/{{ conf_data['name'] }}?id={{ i['id']|urlencode }}">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width: 19px;" fill="#28a745"><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zM13 3v8h8V3h-8zm6 6h-4V5h4v4zM13 13h2v2h-2zM15 15h2v2h-2zM13 17h2v2h-2zM17 17h2v2h-2zM19 19h2v2h-2zM15 19h2v2h-2zM17 13h2v2h-2zM19 15h2v2h-2z"/></svg>
                                        </button>
                                        <a href="/download/{{ conf_data['name'] }}?id={{ i['id']|urlencode }}" class="btn btn-outline-info btn-download-peer btn-control">
                                            <i class="bi bi-download"></i>
                                        </a>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        {%endfor%}
    </div>
</main>
