import QtQuick
import QtQuick.Controls

TabBar {
  id: root
  spacing: 0 // у Fusion TabBar.spacing по умолчанию -1

  property int parentWidth: 0

  // Общее подчеркивание всех табов
  background: Rectangle {
    color: Theme.colorTransparent

    Rectangle {
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.bottom: parent.bottom
      height: 1
      color: Theme.color4
    }
  }

  component TabElement: TabButton {
    id: tabElement
    padding: 10

    contentItem: Text {
      text: tabElement.text
      color: tabElement.checked ? Theme.color2 : Theme.color3
      font.pixelSize: 13
      font.bold: tabElement.checked
      horizontalAlignment: Text.AlignHCenter
      verticalAlignment: Text.AlignVCenter
    }

    background: Rectangle {
      radius: 3
      color: Theme.colorTransparent

      // Подчёркивание активного таба
      Rectangle {
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.margins: 0
        height: 1
        radius: 1
        color: Theme.color6
        visible: tabElement.checked
      }
    }
  }

  TabElement {
    text: "Обновление"
    width: root.parentWidth / 3
  }

  TabElement {
    text: "Установка"
    width: root.parentWidth / 3
  }

  TabElement {
    text: "Удаление"
    width: root.parentWidth / 3
  }
}