{% extends "freq/base.html" %}
{% load static freq_extras %}
{% block title %}نايل سات بالعربي - تردد أي قناة في ثانية{% endblock %}
{% block description %}أداة بحث فورية في ترددات قنوات النايل سات والعرب سات الموثقة - التردد والاستقطاب والترميز والجودة. تحرير: Ah-Abdelbast.{% endblock %}
{% block content %}
  <section class="masthead">
    <div class="microbar" dir="ltr" aria-hidden="true">
      <span>NILESAT 7.0°W</span><i></i><span>BADR 26.0°E</span>
      <span class="flex"></span>
      <span>VERIFIED FREQUENCY DATABASE</span><i></i><span>CAIRO · EGYPT</span>
    </div>
    <div class="mast-grid">
      <div class="mast-copy">
        <h1>تردد أي قناة...<br>في <em>ثانية</em> واحدة</h1>
        <p class="lede">اكتب اسم القناة ويطلع لك ترددها الموثق على طول - التردد والاستقطاب والترميز والجودة. قاعدة بيانات بيحررها ويراجعها <span dir="ltr">Ah-Abdelbast</span> بنفسه، مش أرقام منسوخة من مواقع تانية.</p>
      </div>
      <div class="scope" aria-hidden="true">
        <svg viewBox="0 0 320 320" fill="none">
          <circle cx="160" cy="160" r="150" class="sc-ring"/>
          <circle cx="160" cy="160" r="112" class="sc-ring"/>
          <circle cx="160" cy="160" r="74" class="sc-ring strong"/>
          <circle cx="160" cy="160" r="36" class="sc-ring"/>
          <line x1="160" y1="2" x2="160" y2="318" class="sc-axis"/>
          <line x1="2" y1="160" x2="318" y2="160" class="sc-axis"/>
          <g class="sc-sweep"><line x1="160" y1="160" x2="160" y2="14" class="sc-beam"/><circle cx="160" cy="52" r="4" class="sc-dot"/></g>
          <circle cx="238" cy="98" r="3.5" class="sc-dot dim"/>
          <circle cx="92" cy="228" r="3.5" class="sc-dot dim"/>
          <circle cx="160" cy="160" r="5" class="sc-core"/>
        </svg>
        <div class="scope-cap" dir="ltr">7.0°W — 26.0°E · LIVE INDEX</div>
      </div>
    </div>
  </section>

  <section class="tool">
    <div class="tool-head" dir="ltr"><span class="mono-label">FREQUENCY SEARCH</span><span class="flex"></span><span class="mono-label dim">{{ indexed_count }} CHANNELS INDEXED</span></div>
    <div class="searchwrap">
      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.3-4.3"></path></svg>
      <input id="q" type="search" placeholder="ابحث باسم القناة... مثال: طيور الجنة" autocomplete="off" aria-label="ابحث باسم القناة">
    </div>
    <div class="chips">
      <span>الأكثر بحثا:</span>
      <button class="chip" type="button">طيور الجنة</button>
      <button class="chip" type="button">MBC مصر</button>
      <button class="chip" type="button">العربية</button>
      <button class="chip" type="button">الكأس</button>
      <button class="chip" type="button">روتانا سينما</button>
      <button class="chip" type="button">أون سبورت</button>
    </div>
    <div class="filters">
      <select id="f-sat" aria-label="القمر"><option value="">كل الأقمار</option><option value="Nilesat">نايل سات</option><option value="Arabsat">عرب سات (بدر)</option></select>
      <select id="f-enc" aria-label="التشفير"><option value="">مجانية ومشفرة</option><option value="free">مجانية فقط</option><option value="encrypted">مشفرة فقط</option></select>
      <select id="f-q" aria-label="الجودة"><option value="">كل الجودات</option><option value="HD">HD</option><option value="SD">SD</option></select>
      <select id="f-cat" aria-label="التصنيف"><option value="">كل التصنيفات</option></select>
    </div>
  </section>

  <section id="results" aria-live="polite"></section>

  <div class="statstrip">
    <div class="stat"><b id="st-ch">0</b><span>قناة موثقة نشطة</span></div>
    <div class="stat"><b id="st-tp">0</b><span>تردد ناقل</span></div>
    <div class="stat"><b>2</b><span>نايل سات وعرب سات</span></div>
    <div class="stat"><b>100%</b><span>تحرير ومراجعة <span dir="ltr">Ah-Abdelbast</span></span></div>
  </div>

  {% ad_slot 'home_leaderboard' %}

  {% if latest_changes %}
  <section class="block">
    <div class="sec-head">
      <span class="sec-no" dir="ltr">01</span>
      <h2>أحدث التحديثات الموثقة</h2>
      <span class="rule"></span>
      <a class="sec-link" href="{% url 'changes' %}">سجل التغييرات كاملا</a>
    </div>
    <ul class="ticker">
      {% for change in latest_changes %}
      <li>
        <time class="mono-t" dir="ltr" datetime="{{ change.published_at|date:'c' }}">{{ change.published_at|date:"Y-m-d" }}</time>
        <p><a href="{% url 'channel_detail' change.channel.slug %}">{{ change.channel.name_ar }}</a> - {{ change.public_text }}</p>
      </li>
      {% endfor %}
    </ul>
  </section>
  {% endif %}

  {% if categories %}
  <section class="block">
    <div class="sec-head">
      <span class="sec-no" dir="ltr">02</span>
      <h2>تصفح حسب التصنيف</h2>
      <span class="rule"></span>
      <a class="sec-link" href="{% url 'channels' %}">كل القنوات</a>
    </div>
    <div class="tiles">
      {% for c in categories %}
      <a class="tile{% if forloop.first %} big{% endif %}" href="{% url 'category_detail' c.slug %}">
        <span class="tile-name">{{ c.name }}</span>
        <span class="tile-count"><b class="num">{{ c.n }}</b> قناة</span>
        <span class="tile-slug" dir="ltr">{{ c.slug|upper }}</span>
      </a>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if picks %}
  <section class="block">
    <div class="sec-head">
      <span class="sec-no" dir="ltr">03</span>
      <h2>مختارات موثقة</h2>
      <span class="rule"></span>
      <span class="mono-label dim" dir="ltr">EDITOR'S VERIFIED PICKS</span>
    </div>
    <div class="index-list">
      {% for item in picks %}
      <a class="index-row" href="{% url 'channel_detail' item.channel.slug %}">
        <span class="ir-main">
          <span class="ir-name">{{ item.channel.name_ar }}</span>
          <span class="ir-sub">{{ item.channel.category.name }}{% if item.channel.name_en %} · <span dir="ltr">{{ item.channel.name_en }}</span>{% endif %}</span>
        </span>
        {% if item.primary %}
        <span class="ir-freq"><b class="num">{{ item.primary.transponder.frequency }}</b> <span class="mono-t" dir="ltr">{{ item.primary.transponder.polarity }} · {{ item.primary.transponder.satellite.name_en|upper }}</span></span>
        <span class="ir-date">آخر تحقق <span class="num">{{ item.primary.last_verified|date:"Y-m-d" }}</span></span>
        {% endif %}
        <span class="ir-arrow" aria-hidden="true">←</span>
      </a>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  <section class="block">
    <div class="sec-head">
      <span class="sec-no" dir="ltr">04</span>
      <h2>أدوات على السريع</h2>
      <span class="rule"></span>
    </div>
    <div class="toolrows">
      <a class="toolrow" href="{% url 'dish_calculator' %}">
        <span class="tr-main"><b>حاسبة توجيه الطبق</b><span>زوايا أي محافظة مصرية لأي قمر - من إحداثيات عاصمة المحافظة</span></span>
        <span class="mono-label" dir="ltr">DISH CALC</span>
      </a>
      <a class="toolrow" href="{% url 'troubleshoot' %}">
        <span class="tr-main"><b>فاحص الإشارة وحل المشاكل</b><span>٣ أسئلة ويوصلك لسبب المشكلة وخطوات حلها</span></span>
        <span class="mono-label" dir="ltr">TROUBLESHOOT</span>
      </a>
      <a class="toolrow" href="{% url 'compare' %}">
        <span class="tr-main"><b>مقارنة الترددات</b><span>قارن بث قناتين جنب بعض: التردد والجودة والتشفير والتحقق</span></span>
        <span class="mono-label" dir="ltr">COMPARE</span>
      </a>
    </div>
  </section>
{% endblock %}
{% block extra_body %}
<script>window.INDEX_URL = "{{ index_url }}";</script>
<div class="modal" id="cardModal" hidden>
  <div class="modal-in">
    <canvas id="cardCanvas" width="1080" height="1080"></canvas>
    <div class="modal-actions">
      <button type="button" class="main" onclick="downloadCard()">تنزيل الكارت</button>
      <button type="button" onclick="shareCardWA()">مشاركة واتساب</button>
      <button type="button" onclick="shareCardFB()">مشاركة فيسبوك</button>
      <button type="button" class="ghost" onclick="closeCard()">إغلاق</button>
    </div>
  </div>
</div>
<script src="{% static 'freq/search.js' %}"></script>
<script src="{% static 'freq/card.js' %}"></script>
{% endblock %}