{% extends "base.html" %}

{% block title %}Create Service{% endblock %}
{% block page_title %}Create Service{% endblock %}
{% block page_subtitle %}New versioned, creator-private service object{% endblock %}
{% block layer_indicator %}L3 Objects · A2 Contracts{% endblock %}

{% block content %}
<div class="max-w-lg">
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-6">
    <form method="post" class="space-y-4">
      {% csrf_token %}
      <div>
        <label for="name" class="block text-sm font-medium text-slate-700 mb-1">Service Name</label>
        <input type="text" name="name" id="name" required placeholder="e.g., user-api"
               class="w-full px-3 py-2 rounded-lg border border-slate-300 text-sm focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
      </div>
      <div>
        <label for="description" class="block text-sm font-medium text-slate-700 mb-1">Description</label>
        <textarea name="description" id="description" rows="2" placeholder="What does this service do?"
                  class="w-full px-3 py-2 rounded-lg border border-slate-300 text-sm focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none"></textarea>
      </div>
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label for="language" class="block text-sm font-medium text-slate-700 mb-1">Language</label>
          <select name="language" id="language" class="w-full px-3 py-2 rounded-lg border border-slate-300 text-sm">
            <option value="python">Python</option>
            <option value="go">Go</option>
            <option value="typescript">TypeScript</option>
            <option value="kotlin">Kotlin</option>
            <option value="rust">Rust</option>
            <option value="java">Java</option>
          </select>
        </div>
        <div>
          <label for="port" class="block text-sm font-medium text-slate-700 mb-1">Port (optional)</label>
          <input type="number" name="port" id="port" placeholder="8080"
                 class="w-full px-3 py-2 rounded-lg border border-slate-300 text-sm focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
        </div>
      </div>
      <div class="flex justify-end gap-3 pt-2">
        <a href="{% url 'services_list' %}" class="px-4 py-2 text-sm text-slate-700 hover:text-slate-900">Cancel</a>
        <button type="submit" class="px-4 py-2 bg-brand-600 text-white text-sm font-medium rounded-lg hover:bg-brand-700 transition-colors">
          Create Service
        </button>
      </div>
    </form>
  </div>
  <p class="text-xs text-slate-400 mt-3">
    The service will be creator-private. Use the Sharing tab on the detail page to share it with your team.
  </p>
</div>
{% endblock %}