{% extends 'base.html' %}

{% block content %}
    <h2>{{ user.username }}'s Attributes</h2>

    {% if user.public_key %}
        <h3 class="mt-4">Public Key</h3>
        <pre class="bg-light p-3">{{ user.public_key }}</pre>
    {% else %}
        <div class="alert alert-warning mt-3">
            <strong>Note:</strong> No public key uploaded. 
            <a href="{% url 'abac:upload_public_key' username=user.username %}" class="alert-link">Click here to upload.</a>
        </div>
    {% endif %}
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Attribute Name</th>
                <th scope="col">Last Modified</th>
                <th scope="col">Value</th>
            </tr>
        </thead>
        <tbody>
            {% for attribute in attributes %}
                <tr>
                    <td>{{ attribute.attribute_type.name }}</td>
                    <td>{{ attribute.last_modified|date:"F d, Y H:i" }}</td>
                    <td>
                        {% if not attribute.attribute_type.is_private %}
                            {{ attribute.value }}
                        {% else %}
                            <i>Private</i>
                        {% endif %}
                    </td>
                </tr>
            {% empty %}
                <tr>
                    <td colspan="3">This user has no attributes.</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

    <h3 class="mt-4">Upload Precertified Definitions</h3>
    <div class="alert alert-warning mt-3">
        <strong>Attention:</strong> These attributes are not encrypted and are immediatley forwarded to the NGAC backend! <strong>Do NOT upload senesitive information here!</strong>
    </div>
    <form method="post" enctype="multipart/form-data" class="mb-3">
        {% csrf_token %}
        <div class="custom-file mb-3">
            <input type="file" class="custom-file-input" id="precertifiedFile" name="precertified_file">
            <label class="custom-file-label" for="precertifiedFile">Choose file</label>
        </div>
        <button type="submit" class="btn btn-primary">Upload</button>
    </form>
    <script>
        // This script ensures that the file name is displayed in the custom file input after selection
        document.querySelector('.custom-file-input').addEventListener('change', function (e) {
            var fileName = document.getElementById("precertifiedFile").files[0].name;
            var nextSibling = e.target.nextElementSibling;
            nextSibling.innerText = fileName;
        });
    </script>
{% endblock %}