{% extends "base.html" %}

{% block title %}AS215085 - Router tools | BGP Peer History{% endblock %}

{% block page_header %}<H3>BGP Peer history</H3>{% endblock %}

{% block content %}
<section>
    <h2>BGP Peer History for {{ neighbor_ip }}</h2>
    <h5 class="text-muted">{{ ip_version }} Neighbor</h5>

    <div class="d-flex justify-content-end align-items-center mb-3 flex-wrap">
        <div class="btn-group me-2" role="group" aria-label="Time range">
            <button type="button" class="btn btn-outline-primary active" data-range="24h">24H</button>
            <button type="button" class="btn btn-outline-primary" data-range="7d">7D</button>
            <button type="button" class="btn btn-outline-primary" data-range="30d">30D</button>
            <button type="button" class="btn btn-outline-primary" data-range="90d">90D</button>
        </div>
        <div class="d-flex align-items-center">
            <input type="datetime-local" id="startDate" class="form-control me-1" style="width: auto;">
            <span class="me-1">to</span>
            <input type="datetime-local" id="endDate" class="form-control me-1" style="width: auto;">
            <button type="button" id="customRangeBtn" class="btn btn-primary">Go</button>
        </div>
    </div>

    <div class="achart-wrapper-chart">
        <canvas id="peerHistoryChart"></canvas>
    </div>
	<button type="button" class="btn btn-primary mt-3" onclick="window.close()">
          <i class="fas fa-window-close"></i> Back to BGP overview
	</button>
</section>

<script>
    const neighborIp = "{{ neighbor_ip }}";
</script>
<script src="{{ url_for('static', filename='js/chart.js') }}"></script>
<script src="{{ url_for('static', filename='js/chartjs-adapter-date-fns') }}"></script>
<script src="{{ url_for('static', filename='js/pages/bgp_peer_graph.js') }}"></script>
{% endblock %}