{% extends "baseTemplate/index.html" %}
{% load static %}
{# MariaDB tuning: current values, RAM-tier presets and a manual form. #}

{% block title %}MariaDB tuning{% endblock %}

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-database"></i> MariaDB tuning</h1>
      <p class="cp-page-head__sub">Saving restarts the MariaDB service.</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">
    <div class="cp-card__head">
      <h2 class="cp-card__title"><i class="fa-solid fa-wand-magic-sparkles"></i> Presets</h2>
      <p class="cp-card__sub">Computed from this server's actual RAM. Fills the form below -- nothing is applied until you save.</p>
    </div>
    <div class="cp-card__body">
      <div class="cp-btn-group">
        <button type="button" class="cp-btn cp-btn--ghost" ng-disabled="busy" ng-click="applyPreset('small')">
          Small &middot; 2GB RAM
        </button>
        <button type="button" class="cp-btn cp-btn--ghost" ng-disabled="busy" ng-click="applyPreset('medium')">
          Medium &middot; 4GB RAM
        </button>
        <button type="button" class="cp-btn cp-btn--ghost" ng-disabled="busy" ng-click="applyPreset('large')">
          Large &middot; 8GB+ RAM
        </button>
      </div>
    </div>
  </div>

  <div class="cp-card">
    <div class="cp-card__head">
      <h2 class="cp-card__title"><i class="fa-solid fa-sliders"></i> Values</h2>
    </div>
    <div class="cp-card__body">
      <form novalidate ng-submit="save()">
        <div class="cp-form-grid">
          <div>
            <label class="cp-label">InnoDB buffer pool size</label>
            <input type="text" class="cp-input" ng-model="values.innodb_buffer_pool_size" placeholder="1024M">
          </div>
          <div>
            <label class="cp-label">Max connections</label>
            <input type="number" class="cp-input" ng-model="values.max_connections">
          </div>
          <div>
            <label class="cp-label">InnoDB log file size</label>
            <input type="text" class="cp-input" ng-model="values.innodb_log_file_size" placeholder="96M">
          </div>
          <div>
            <label class="cp-label">Temp table size</label>
            <input type="text" class="cp-input" ng-model="values.tmp_table_size" placeholder="32M">
          </div>
          <div>
            <label class="cp-label">Max heap table size</label>
            <input type="text" class="cp-input" ng-model="values.max_heap_table_size" placeholder="32M">
          </div>
          <div>
            <label class="cp-label">Table open cache</label>
            <input type="number" class="cp-input" ng-model="values.table_open_cache">
          </div>
          <div>
            <label class="cp-label">Thread cache size</label>
            <input type="number" class="cp-input" ng-model="values.thread_cache_size">
          </div>
          <div>
            <label class="cp-label">InnoDB flush log at trx commit</label>
            <select class="cp-select" ng-model="values.innodb_flush_log_at_trx_commit">
              <option value="0">0 (fastest, least durable)</option>
              <option value="1">1 (ACID compliant)</option>
              <option value="2">2 (balanced)</option>
            </select>
          </div>
          <div>
            <label class="cp-label">Max allowed packet</label>
            <input type="text" class="cp-input" ng-model="values.max_allowed_packet" placeholder="32M">
          </div>
          <div>
            <label class="cp-label">Wait timeout (s)</label>
            <input type="number" class="cp-input" ng-model="values.wait_timeout">
          </div>
        </div>
        <div class="cp-btn-group" style="margin-top:14px">
          <button type="submit" class="cp-btn cp-btn--primary" ng-disabled="busy">
            <span ng-bind="busy ? 'Saving…' : 'Save and restart MariaDB'"></span>
          </button>
        </div>
      </form>
    </div>
  </div>

</div>
{% endblock %}

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