- add_javascript_pack_tag("settings")
- page_title t('.page_title')

.row.fluentd-setting-inout
  .col-xl-4
    .card.card-primary
      .card-header
        %h4= t('.in')
      .card-body
        - %w|tail syslog monitor_agent http forward|.each do |type|
          %p
            = link_to(send("daemon_setting_in_#{type}_path", @fluentd)) do
              = icon('fa-file-text-o fa-lg')
              = t("fluentd.common.setup_in_#{type}")
  .col-xl-1.arrow-right
    = icon "fa-arrow-circle-right"
  .col-xl-2
    = image_tag "/fluentd-logo.png", style: "max-width: 100%"
  .col-xl-1.arrow-right
    = icon "fa-arrow-circle-right"
  .col-xl-4
    .card.card-primary
      .card-header
        %h4= t('.out')
      .card-body
        - %w|stdout tdlog s3 mongo elasticsearch forward|.each do |type|
          %p
            = link_to(send("daemon_setting_out_#{type}_path", @fluentd)) do
              = icon('fa-file-text-o fa-lg')
              = t("fluentd.common.setup_out_#{type}")

= render "shared/vue/setting"

#vue-setting.current-settings
  %h2
    = t('.current')
    .float-right
      %button.btn.btn-outline-dark.btn-sm{"v-on:click" => "update", "v-if" => "!loading"}= icon('fa-refresh')
      %button.btn.btn-outline-dark.btn-sm{"v-if" => "loading"}= icon('fa-spin fa-refresh')
  .row
    .col-xl-6.input
      %h3= t('.in')
      %div{"v-if" => "loaded && sections.sources.length == 0"}
        %p.empty= t('.setting_empty')
      %setting-section{"v-if" => "loaded && sections.sources.length > 0",
                       "v-for" => "source in sections.sources",
                       "v-bind:id" => "source.id",
                       "v-bind:content" => "source.content",
                       "v-bind:type" => "source.type",
                       "v-bind:name" => "source.name",
                       "v-bind:arg" => "source.arg"}
    .col-xl-6.output
      %h3= t('.out')
      %div{"v-if" => "loaded && sections.matches.length == 0"}
        %p.empty= t('.setting_empty')
      %setting-section{"v-if" => "loaded && sections.matches.length > 0",
                       "v-for" => "match in sections.matches",
                       "v-bind:id" => "match.id",
                       "v-bind:content" => "match.content",
                       "v-bind:type" => "match.type",
                       "v-bind:name" => "match.name",
                       "v-bind:arg" => "match.arg"}