{% extends 'base.html' %}

{% block styles %}
{{super()}}
{% endblock %}

{% block content %}
<div class="container">
  {% for service in logs %}
  {% set btncolor = 'btn-success' if service.active == 'Active' else 'btn-secondary' %}
  <p>
  <button class="btn {{ btncolor }} btn-block" type="button" data-toggle="collapse" data-target="#{{ service.name|replace('.','') }}" aria-expanded="false" aria-controls="{{ service.name|replace('.','') }}">
    {{ service.name }} : {{ service.active }}
  </button>
</p>
  <div class="collapse" id="{{ service.name|replace('.','') }}">
    <div class="card card-body">
  <h4>STATUS: </h4> <p>{{ service.sysctl_status|safe }} </p>
  <h4>JOURNAL: </h4><p> {{ service.journalctl|safe }} </p>
    </div>
  </div>
{% endfor %}
</div>
{% endblock %}
{% block scripts %}
    <!-- Optional JavaScript -->
        <script type="text/javascript" src="{{ url_for('static', filename='lib/jquery-3.5.1.min.js') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='lib/bootstrap-4.6.1.bundle.min.js') }}"></script>
    {% endblock %}