{% extends 'base.html' %}

{% block title %}
{% if specification %}
    ویرایش مشخصات تخنیکی
{% else %}
    افزودن مشخصات تخنیکی
{% endif %}
{% endblock %}

{% block content %}

<div class="container-fluid">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="fw-bold mb-1">
    {% if specification %}
        ویرایش مشخصات تخنیکی
    {% else %}
        افزودن مشخصات تخنیکی
    {% endif %}
</h3>

            <div class="text-muted">
                تجهیز:
                <strong>{{ asset.asset_code }}</strong>
                -
                {{ asset.name }}
            </div>
        </div>

        <a href="{% url 'asset_detail' asset.pk %}"
           class="btn btn-secondary">
            ← بازگشت
        </a>
    </div>


    <div class="card shadow-sm">

        <div class="card-header bg-primary text-white">
            <strong>
    {% if specification %}
        ویرایش مشخصات تخنیکی
    {% else %}
        مشخصات تخنیکی جدید
    {% endif %}
</strong>
        </div>

        <div class="card-body">

            {% if error_message %}
             <div class="alert alert-warning">
              <strong>توجه:</strong>
          {{ error_message }}
          </div>
            {% endif %}

            <form method="post">

                {% csrf_token %}

                <div class="row g-3">

                    <div class="col-md-5">

                        <label class="form-label fw-bold">
                            مشخصه
                        </label>

                        <input
    type="text"
    name="key"
    class="form-control"
    placeholder="مثلاً RAM"
    value="{{ specification.key|default:'' }}"
    required
>

                        <div class="form-text">
                            نام مشخصه تخنیکی را وارد کنید.
                        </div>

                    </div>


                    <div class="col-md-7">

                        <label class="form-label fw-bold">
                            مقدار
                        </label>

                        <input
    type="text"
    name="value"
    class="form-control"
    placeholder="مثلاً 8 GB"
    value="{{ specification.value|default:'' }}"
    required
>

                        <div class="form-text">
                            مقدار مشخصه را وارد کنید.
                        </div>

                    </div>

                </div>


                <hr class="my-4">


                <div class="d-flex gap-2">

                    <button
    type="submit"
    class="btn btn-success">

    {% if specification %}
        💾 ذخیره تغییرات
    {% else %}
        💾 ثبت مشخصه
    {% endif %}

</button>


                    <a
                        href="{% url 'asset_detail' asset.pk %}"
                        class="btn btn-secondary">

                        انصراف

                    </a>

                </div>

            </form>

        </div>

    </div>

</div>

{% endblock %}