{% extends "baseTemplate/index.html" %}
{% load static %}
{# Admin: read-only detection of third-party security products. #}

{% block title %}Security integrations{% endblock %}

{% block content %}
<div ng-controller="securityIntegrationsController">

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-puzzle-piece"></i> Security integrations</h1>
      <p class="cp-page-head__sub">
        CloudPanel never downloads or runs a vendor installer; this page only
        reports what it can already see on this server.
      </p>
    </div>
  </div>

  <div class="cp-alert cp-alert--danger" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fa-solid fa-triangle-exclamation"></i>
    <p ng-bind="errorMessage"></p>
  </div>

  <div class="cp-card" ng-repeat="(key, product) in products track by key" ng-cloak>
    <div class="cp-card__head">
      <h2 class="cp-card__title">
        <i class="fa-solid fa-shield" aria-hidden="true"></i>
        <span ng-bind="labels[key] || key"></span>
      </h2>
      <span class="cp-badge" ng-class="product.installed ? 'cp-badge--success' : 'cp-badge--warning'"
            ng-bind="product.installed ? 'Installed' : 'Not installed'"></span>
    </div>
    <div class="cp-card__body">
      <p class="cp-help" ng-if="product.version">Version: <span ng-bind="product.version"></span></p>
      <p>
        <a ng-href="{$ product.docs $}" target="_blank" rel="noopener noreferrer">
          <i class="fa-solid fa-book" aria-hidden="true"></i> Documentation
        </a>
      </p>
      <p ng-if="!product.installed" class="cp-help">
        <strong>Install:</strong> <span ng-bind="product.installHint"></span>
      </p>
    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'malwareScanner/malwareScanner.js' %}"></script>
{% endblock %}