{% extends "layout.html" %}
{% block container %}
          <div class="card" id="data-el-4">
            <div class="card-body ov-auto">
	      <h5 class="card-title">Add New TGR</h5>
              <form id="upload_form" action="/tgr/add" method="post">
              <div class="row" style="margin-top: 25px">
                <div class="col"><input class="form-control" type="text" placeholder="Name" id="tgr_name" name="tgr_name"></div>
                <div class="col"><input class="form-control" type="text" placeholder="IP Address" id="tgr_ip" name="tgr_ip"></div>
              </div>
              <div class="row" style="margin-top: 25px">
                <div class="col"><input class="form-control" type="text" placeholder="Data Admin-ID" id="did" name="did"></div>
                <div class="col"><input class="form-control" type="password" placeholder="DMK" id="dmk" name="dmk"></div>
              </div>
	      <div class="input-group" style="margin-top: 10px">
	         <input type="text" class="form-control" placeholder="{{ command_status['add_tgr_status'] }}" readonly>
                <div class="input-group-append">
                  <input type="submit" class="btn btn-dark text-white" value="Configure">
                </div>
	      </div>
	      </form>
	    </div>
          </div>
<div class="card" id="data-el-4">
    <div class="card-body ov-auto">
        <h5 class="card-title">Public key</h5>
        <button id="pubkeyToggle" onclick="toggleTextarea()">Show Public Key</button>
        <button id="copyButton" onclick="copyToClipboard()" style="display: none;">Copy to Clipboard</button>
        <div class="row" style="margin-top: 10px">
          <div class="col" id="colContainer" style="max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out;">
            <textarea id="pubkeyTextarea" rows="10" class="form-control" style="height: 100%;" readonly>{{ sg_status['public_key'] }}</textarea>
          </div>
        </div>
    </div>
</div>
<script>
function toggleTextarea() {
    var colContainer = document.getElementById('colContainer');
    var showHideButton = document.getElementById('pubkeyToggle');
    var copyButton = document.getElementById('copyButton');

    if (colContainer.style.maxHeight === '0px') {
        colContainer.style.maxHeight = '500px'; // 適切な最大の高さに変更してください
        showHideButton.textContent = 'Hide Public Key';
	copyButton.style.display = 'inline';
    } else {
        colContainer.style.maxHeight = '0';
        showHideButton.textContent = 'Show Public Key';
	copyButton.style.display = 'none';
    }
}

function copyToClipboard() {
    var textarea = document.getElementById('pubkeyTextarea');
    textarea.select();
    document.execCommand('copy');
}

</script>
{% endblock %}