{% extends "layouts/base.html" %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Convert to Action" %} - {{ observation.tracking_code }} - PX360{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'observations:observation_list' %}">{% trans "Observations" %}</a></li>
            <li class="breadcrumb-item"><a href="{% url 'observations:observation_detail' observation.id %}">{{ observation.tracking_code }}</a></li>
            <li class="breadcrumb-item active">{% trans "Convert to Action" %}</li>
        </ol>
    </nav>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-arrow-right-circle me-2"></i>
                        {% trans "Convert Observation to PX Action" %}
                    </h5>
                </div>
                <div class="card-body">
                    <!-- Observation Summary -->
                    <div class="alert alert-info mb-4">
                        <h6 class="alert-heading">{% trans "Observation Summary" %}</h6>
                        <div class="row">
                            <div class="col-md-6">
                                <small class="text-muted">{% trans "Tracking Code" %}</small>
                                <div><strong>{{ observation.tracking_code }}</strong></div>
                            </div>
                            <div class="col-md-6">
                                <small class="text-muted">{% trans "Severity" %}</small>
                                <div>
                                    <span class="badge bg-{{ observation.get_severity_color }}">
                                        {{ observation.get_severity_display }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <small class="text-muted">{% trans "Description" %}</small>
                        <p class="mb-0">{{ observation.description|truncatewords:50 }}</p>
                    </div>

                    <!-- Convert Form -->
                    <form method="post">
                        {% csrf_token %}
                        
                        <div class="mb-3">
                            <label class="form-label">{% trans "Action Title" %} <span class="text-danger">*</span></label>
                            {{ form.title }}
                            <div class="form-text">{% trans "A clear, actionable title for the PX Action" %}</div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">{% trans "Description" %} <span class="text-danger">*</span></label>
                            {{ form.description }}
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{% trans "Category" %} <span class="text-danger">*</span></label>
                                {{ form.category }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{% trans "Priority" %} <span class="text-danger">*</span></label>
                                {{ form.priority }}
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{% trans "Assign to Department" %}</label>
                                {{ form.assigned_department }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{% trans "Assign to User" %}</label>
                                {{ form.assigned_to }}
                            </div>
                        </div>
                        
                        <hr>
                        
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'observations:observation_detail' observation.id %}" class="btn btn-outline-secondary">
                                <i class="bi bi-arrow-left me-1"></i>{% trans "Cancel" %}
                            </a>
                            <button type="submit" class="btn btn-success">
                                <i class="bi bi-check-circle me-1"></i>{% trans "Create PX Action" %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}