{% extends "base.html" %}

{% block title %}Unternehmensstrategie - {{ session.company_name }}{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto">
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-white mb-2">Unternehmensstrategie</h1>
        <p class="text-gray-400">Diese Strategie wird bei der Erstellung deiner LinkedIn-Posts berücksichtigt.</p>
        {% if session.company_name %}
        <p class="text-brand-highlight text-sm mt-2">Richtlinien von {{ session.company_name }}</p>
        {% endif %}
    </div>

    {% if not strategy or not strategy.mission %}
    <div class="card-bg border rounded-xl p-8 text-center">
        <div class="w-16 h-16 bg-yellow-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
            </svg>
        </div>
        <p class="text-gray-400">Dein Unternehmen hat noch keine Strategie definiert.</p>
        <p class="text-gray-500 text-sm mt-2">Wende dich an deinen Administrator, um die Unternehmensstrategie einzurichten.</p>
    </div>
    {% else %}
    <div class="space-y-6">
        <!-- Mission & Vision -->
        <div class="card-bg border rounded-xl p-6">
            <h2 class="text-lg font-semibold text-white mb-4">Mission & Vision</h2>
            <div class="space-y-4">
                {% if strategy.mission %}
                <div>
                    <p class="text-sm font-medium text-gray-400 mb-1">Mission</p>
                    <p class="text-white bg-brand-bg-dark rounded-lg p-3">{{ strategy.mission }}</p>
                </div>
                {% endif %}
                {% if strategy.vision %}
                <div>
                    <p class="text-sm font-medium text-gray-400 mb-1">Vision</p>
                    <p class="text-white bg-brand-bg-dark rounded-lg p-3">{{ strategy.vision }}</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Brand Voice -->
        {% if strategy.brand_voice or strategy.tone_guidelines %}
        <div class="card-bg border rounded-xl p-6">
            <h2 class="text-lg font-semibold text-white mb-4">Brand Voice</h2>
            <div class="space-y-4">
                {% if strategy.brand_voice %}
                <div>
                    <p class="text-sm font-medium text-gray-400 mb-1">Markenstimme</p>
                    <p class="text-white bg-brand-bg-dark rounded-lg p-3">{{ strategy.brand_voice }}</p>
                </div>
                {% endif %}
                {% if strategy.tone_guidelines %}
                <div>
                    <p class="text-sm font-medium text-gray-400 mb-1">Tonalität-Richtlinien</p>
                    <p class="text-white bg-brand-bg-dark rounded-lg p-3">{{ strategy.tone_guidelines }}</p>
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}

        <!-- Target Audience -->
        {% if strategy.target_audience %}
        <div class="card-bg border rounded-xl p-6">
            <h2 class="text-lg font-semibold text-white mb-4">Zielgruppe</h2>
            <p class="text-white bg-brand-bg-dark rounded-lg p-3">{{ strategy.target_audience }}</p>
        </div>
        {% endif %}

        <!-- Content Pillars -->
        {% if strategy.content_pillars and strategy.content_pillars|length > 0 %}
        <div class="card-bg border rounded-xl p-6">
            <h2 class="text-lg font-semibold text-white mb-4">Content-Säulen</h2>
            <p class="text-gray-400 text-sm mb-4">Die Hauptthemen, über die das Unternehmen postet.</p>
            <div class="flex flex-wrap gap-2">
                {% for pillar in strategy.content_pillars %}
                <span class="px-3 py-2 bg-brand-highlight/20 border border-brand-highlight/30 rounded-lg text-brand-highlight text-sm">{{ pillar }}</span>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Do's and Don'ts -->
        {% if (strategy.dos and strategy.dos|length > 0) or (strategy.donts and strategy.donts|length > 0) %}
        <div class="grid md:grid-cols-2 gap-6">
            <!-- Do's -->
            {% if strategy.dos and strategy.dos|length > 0 %}
            <div class="card-bg border rounded-xl p-6">
                <h2 class="text-lg font-semibold text-green-400 mb-4 flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    Do's
                </h2>
                <ul class="space-y-2">
                    {% for do in strategy.dos %}
                    <li class="flex items-start gap-2 text-white text-sm">
                        <svg class="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        {{ do }}
                    </li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}

            <!-- Don'ts -->
            {% if strategy.donts and strategy.donts|length > 0 %}
            <div class="card-bg border rounded-xl p-6">
                <h2 class="text-lg font-semibold text-red-400 mb-4 flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                    Don'ts
                </h2>
                <ul class="space-y-2">
                    {% for dont in strategy.donts %}
                    <li class="flex items-start gap-2 text-white text-sm">
                        <svg class="w-4 h-4 text-red-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                        {{ dont }}
                    </li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}
        </div>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}
